├── .gitattributes ├── src ├── Drawer │ ├── constants.ts │ ├── types.ts │ ├── DrawerContent.ts │ ├── DrawerTitleRoot.ts │ ├── DrawerTitleClose.ts │ ├── DrawerTitleContent.ts │ ├── DrawerProvider.tsx │ ├── index.ts │ ├── DrawerRoot.ts │ ├── DrawerOverlay.ts │ └── Drawer.stories.tsx ├── Image │ ├── index.ts │ ├── ImageRoot.tsx │ ├── Image.tsx │ └── Image.stories.tsx ├── Hidden │ ├── index.ts │ ├── Hidden.tsx │ └── Hidden.stories.tsx ├── ReactUtils │ ├── index.ts │ ├── hooks │ │ ├── useTheme.ts │ │ ├── index.ts │ │ ├── useDebounce.ts │ │ └── useBreakpoint.ts │ ├── utils │ │ ├── index.ts │ │ ├── getCurrentBreakpoint.ts │ │ └── breakpointComparison.ts │ └── ReactUtils.stories.mdx ├── TextLink │ ├── index.ts │ ├── TextLinkRoot.tsx │ ├── TextLink.tsx │ └── TextLink.stories.mdx ├── Price │ ├── types.ts │ ├── index.ts │ ├── PriceRoot.ts │ ├── Price.test.tsx │ └── Price.tsx ├── Styleguide │ ├── query │ │ ├── index.ts │ │ ├── types.ts │ │ └── query.ts │ ├── value │ │ ├── index.ts │ │ └── SizeValue.ts │ ├── mixin │ │ ├── index.ts │ │ ├── margin.ts │ │ ├── spacing.ts │ │ ├── Mixin.stories.mdx │ │ └── typography.ts │ ├── theme │ │ ├── zIndex.ts │ │ ├── shape.ts │ │ ├── elevation.ts │ │ ├── Transition.stories.mdx │ │ ├── breakpoint.ts │ │ ├── spacing.ts │ │ ├── Shape.stories.mdx │ │ ├── Breakpoint.stories.mdx │ │ ├── index.ts │ │ ├── palette.ts │ │ ├── transition.ts │ │ ├── Theme.stories.mdx │ │ ├── Spacing.stories.mdx │ │ ├── Elevation.stories.mdx │ │ ├── Palette.stories.mdx │ │ ├── Color.stories.mdx │ │ └── color.ts │ ├── index.ts │ ├── Types.stories.mdx │ └── types.ts ├── Container │ ├── types.ts │ ├── index.ts │ ├── Container.tsx │ ├── Container.stories.tsx │ └── ContainerRoot.ts ├── CssBaseline │ ├── index.ts │ ├── CssBaseline.stories.mdx │ └── CssBaseline.tsx ├── Grid │ ├── types.ts │ ├── index.ts │ ├── Grid.tsx │ ├── GridRoot.ts │ └── mixin │ │ └── options.ts ├── Button │ ├── types.ts │ ├── mixin │ │ ├── pill.ts │ │ ├── disabled.ts │ │ ├── iconOnly.ts │ │ ├── fullWidth.ts │ │ ├── noBackground.ts │ │ ├── elevation.ts │ │ ├── index.ts │ │ ├── link.ts │ │ ├── size.ts │ │ ├── variant.ts │ │ └── status.ts │ ├── ButtonLoadingIndicator.ts │ ├── ButtonLabel.ts │ ├── index.ts │ ├── ButtonAttachment.ts │ ├── ButtonRoot.ts │ └── Button.tsx ├── ThemeProvider │ ├── index.ts │ ├── styled.d.ts │ ├── ThemeProvider.tsx │ └── ThemeProvider.stories.mdx ├── ContentBox │ ├── types.ts │ ├── index.ts │ ├── ContentBox.stories.tsx │ ├── ContentBox.tsx │ └── ContentBoxRoot.tsx ├── locales │ └── index.ts ├── CircularProgress │ ├── types.ts │ ├── CircularProgressSVG.ts │ ├── keyframe │ │ ├── circularRotateKeyframe.ts │ │ └── circularDashKeyframe.ts │ ├── index.ts │ ├── CircularProgressCircle.ts │ ├── CircularProgressRoot.ts │ ├── CircularProgress.stories.tsx │ └── CircularProgress.tsx ├── Typography │ ├── mixin │ │ ├── index.ts │ │ ├── status.ts │ │ └── variant.ts │ ├── index.ts │ ├── types.ts │ ├── TypographyRoot.tsx │ └── Typography.tsx ├── Icon │ ├── base │ │ ├── index.ts │ │ ├── IconHover.tsx │ │ ├── IconHoverRoot.ts │ │ ├── SvgIconRoot.ts │ │ └── SvgIcon.tsx │ ├── ChevronUpIcon.tsx │ ├── ChevronDownIcon.tsx │ ├── ChevronRightIcon.tsx │ ├── SearchIcon.tsx │ ├── CheckboxUncheckedIcon.tsx │ ├── CheckboxCheckedIcon.tsx │ ├── HeartIcon.tsx │ ├── UserIcon.tsx │ ├── BurgerIcon.tsx │ ├── CloseIcon.tsx │ ├── types.ts │ ├── PinterestIcon.tsx │ ├── TwitterIcon.tsx │ ├── FacebookIcon.tsx │ ├── Amex.tsx │ ├── CartIcon.tsx │ ├── Visa.tsx │ ├── MasterCard.tsx │ ├── GiftIcon.tsx │ ├── Icon.stories.mdx │ ├── index.ts │ ├── SofortKlarna.tsx │ ├── GiroPay.tsx │ └── InstagramIcon.tsx ├── Navigation │ ├── NavigationFooterLink.tsx │ ├── index.ts │ ├── NavigationItemRoot.ts │ ├── NavigationHeaderLink.tsx │ ├── NavigationItem.tsx │ ├── Navigation.tsx │ ├── NavigationRoot.ts │ └── Navigation.stories.tsx ├── declarations.d.ts ├── Divider │ ├── types.ts │ ├── index.ts │ ├── Divider.tsx │ ├── Divider.stories.tsx │ └── DividerRoot.ts ├── ButtonGroup │ ├── index.ts │ ├── ButtonGroup.tsx │ ├── ButtonGroup.stories.tsx │ └── ButtonGroupRoot.ts ├── CssGrid │ ├── index.ts │ ├── types.ts │ ├── CssGridStyles.ts │ ├── CssGrid.tsx │ └── CssGrid.stories.tsx ├── index.ts ├── Layout │ ├── index.stories.mdx │ └── index.tsx ├── __tests__ │ └── utils │ │ └── render.tsx └── Stack │ ├── index.stories.mdx │ └── index.tsx ├── .prettierrc.json ├── tsconfig.test.json ├── .github ├── labeler.yml ├── CODEOWNERS ├── pull_request_template.md ├── workflows │ ├── size_labels.yaml │ ├── pull_request.yml │ └── push.yml └── dependabot.yaml ├── docs ├── preview │ ├── index.ts │ ├── SpacingPreview.tsx │ ├── ColorPreview.tsx │ ├── clearThemeTypes.ts │ └── preview.css ├── Introduction.stories.mdx └── utils │ └── arg-types-control.ts ├── .releaserc.js ├── test-runner-jest.config.js ├── jsconfig.json ├── .gitignore ├── CHANGELOG.md ├── sonar-project.properties ├── tsconfig.json ├── README.md └── .eslintrc.json /.gitattributes: -------------------------------------------------------------------------------- 1 | build/* linguist-vendored 2 | .releaserc.js linguist-vendored -------------------------------------------------------------------------------- /src/Drawer/constants.ts: -------------------------------------------------------------------------------- 1 | export const DEFAULT_IDENTIFIER = 'drawer-root' 2 | -------------------------------------------------------------------------------- /src/Image/index.ts: -------------------------------------------------------------------------------- 1 | import Image from './Image' 2 | 3 | export { Image } 4 | -------------------------------------------------------------------------------- /src/Hidden/index.ts: -------------------------------------------------------------------------------- 1 | import Hidden from './Hidden' 2 | 3 | export { Hidden } 4 | -------------------------------------------------------------------------------- /src/ReactUtils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './utils' 2 | export * from './hooks' 3 | -------------------------------------------------------------------------------- /src/TextLink/index.ts: -------------------------------------------------------------------------------- 1 | import TextLink from './TextLink' 2 | 3 | export { TextLink } 4 | -------------------------------------------------------------------------------- /src/Price/types.ts: -------------------------------------------------------------------------------- 1 | export enum Currency { 2 | Euro = '€', 3 | None = 'None', 4 | } 5 | -------------------------------------------------------------------------------- /src/Styleguide/query/index.ts: -------------------------------------------------------------------------------- 1 | import query from './query' 2 | 3 | export default query 4 | -------------------------------------------------------------------------------- /src/Container/types.ts: -------------------------------------------------------------------------------- 1 | export enum Behavior { 2 | Fluid = 'fluid', 3 | Fixed = 'fixed', 4 | } 5 | -------------------------------------------------------------------------------- /src/CssBaseline/index.ts: -------------------------------------------------------------------------------- 1 | import CssBaseline from './CssBaseline' 2 | 3 | export { CssBaseline } 4 | -------------------------------------------------------------------------------- /src/Grid/types.ts: -------------------------------------------------------------------------------- 1 | export type GridSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' 2 | -------------------------------------------------------------------------------- /src/Button/types.ts: -------------------------------------------------------------------------------- 1 | export enum AttachmentPos { 2 | Left = 'row-reverse', 3 | Right = 'row', 4 | } 5 | -------------------------------------------------------------------------------- /src/Drawer/types.ts: -------------------------------------------------------------------------------- 1 | export enum DrawerOrientation { 2 | Left = 'left', 3 | Right = 'right', 4 | } 5 | -------------------------------------------------------------------------------- /src/ThemeProvider/index.ts: -------------------------------------------------------------------------------- 1 | import ThemeProvider from './ThemeProvider' 2 | 3 | export { ThemeProvider } 4 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } -------------------------------------------------------------------------------- /src/ContentBox/types.ts: -------------------------------------------------------------------------------- 1 | export enum Opacity { 2 | Base = '1.0', 3 | Primary = '0.2', 4 | Secondary = '0.4', 5 | } 6 | -------------------------------------------------------------------------------- /src/Price/index.ts: -------------------------------------------------------------------------------- 1 | import Price from './Price' 2 | import { Currency } from './types' 3 | 4 | export { Price, Currency } 5 | -------------------------------------------------------------------------------- /src/locales/index.ts: -------------------------------------------------------------------------------- 1 | import de from './de/translations.json' 2 | 3 | const locales = { de } 4 | 5 | export { locales } 6 | -------------------------------------------------------------------------------- /src/CircularProgress/types.ts: -------------------------------------------------------------------------------- 1 | export enum State { 2 | Determinate = 'determinate', 3 | Indeterminate = 'indeterminate', 4 | } 5 | -------------------------------------------------------------------------------- /src/Typography/mixin/index.ts: -------------------------------------------------------------------------------- 1 | import status from './status' 2 | import variant from './variant' 3 | 4 | export { status, variant } 5 | -------------------------------------------------------------------------------- /src/ContentBox/index.ts: -------------------------------------------------------------------------------- 1 | import ContentBox from './ContentBox' 2 | import { Opacity } from './types' 3 | 4 | export { ContentBox, Opacity } 5 | -------------------------------------------------------------------------------- /src/ReactUtils/hooks/useTheme.ts: -------------------------------------------------------------------------------- 1 | import { theme, Theme } from '@mycompany/design-system/Styleguide' 2 | 3 | export default (): Theme => theme 4 | -------------------------------------------------------------------------------- /src/Styleguide/value/index.ts: -------------------------------------------------------------------------------- 1 | import ColorValue from 'color' 2 | import SizeValue from './SizeValue' 3 | 4 | export { SizeValue, ColorValue } 5 | -------------------------------------------------------------------------------- /src/CircularProgress/CircularProgressSVG.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export default styled.svg` 4 | display: block; 5 | ` 6 | -------------------------------------------------------------------------------- /src/Icon/base/index.ts: -------------------------------------------------------------------------------- 1 | import SvgIcon from './SvgIcon' 2 | import SvgIconRoot from './SvgIconRoot' 3 | import IconHover from './IconHover' 4 | 5 | export { SvgIcon, SvgIconRoot, IconHover } 6 | -------------------------------------------------------------------------------- /src/Navigation/NavigationFooterLink.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const NavigationFooterLink = styled.a` 4 | &:hover { 5 | text-decoration: underline; 6 | } 7 | ` 8 | -------------------------------------------------------------------------------- /src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare interface Window { 2 | DD_LOGS: any 3 | UC_UI?: { showSecondLayer: () => void } 4 | mycompany: { 5 | apiStore: {} 6 | initialLanguage: string 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "resolveJsonModule": true 5 | }, 6 | "exclude": [ 7 | "node_modules", 8 | "dist" 9 | ] 10 | } -------------------------------------------------------------------------------- /src/Button/mixin/pill.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | 3 | export default ({ pill }: StyledProps<{ pill: boolean }>) => 4 | pill && 5 | css` 6 | border-radius: 5rem; 7 | ` 8 | -------------------------------------------------------------------------------- /src/ReactUtils/hooks/index.ts: -------------------------------------------------------------------------------- 1 | import useTheme from './useTheme' 2 | import useBreakpoint from './useBreakpoint' 3 | import useDebounce from './useDebounce' 4 | 5 | export { useTheme, useBreakpoint, useDebounce } 6 | -------------------------------------------------------------------------------- /src/Button/mixin/disabled.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | 3 | export default ({ disabled }: StyledProps<{ disabled: boolean }>) => 4 | disabled && 5 | css` 6 | opacity: 0.7; 7 | ` 8 | -------------------------------------------------------------------------------- /src/Divider/types.ts: -------------------------------------------------------------------------------- 1 | export enum Orientation { 2 | Horizontal = 'horizontal', 3 | Vertical = 'vertical', 4 | } 5 | 6 | export enum Display { 7 | FullWidth = 'fullWidth', 8 | Middle = 'middle', 9 | } 10 | -------------------------------------------------------------------------------- /.github/labeler.yml: -------------------------------------------------------------------------------- 1 | # https://github.com/actions/labeler 2 | 3 | # Add 'gh-actions' label 4 | gh-actions: 5 | - .github/* 6 | - .github/**/* 7 | 8 | # Add 'documentation' label 9 | documentation: 10 | - '*.md' 11 | -------------------------------------------------------------------------------- /src/Styleguide/mixin/index.ts: -------------------------------------------------------------------------------- 1 | import typography from './typography' 2 | import margin from './margin' 3 | import spacing from './spacing' 4 | 5 | export default { 6 | typography, 7 | margin, 8 | spacing, 9 | } 10 | -------------------------------------------------------------------------------- /docs/preview/index.ts: -------------------------------------------------------------------------------- 1 | import SpacingPreview from './SpacingPreview' 2 | import ColorPreview from './ColorPreview' 3 | import clearThemeTypes from './clearThemeTypes' 4 | 5 | export { ColorPreview, SpacingPreview, clearThemeTypes } 6 | -------------------------------------------------------------------------------- /src/ThemeProvider/styled.d.ts: -------------------------------------------------------------------------------- 1 | import {} from 'styled-components' 2 | import { Theme } from '@mycompany/design-system/Styleguide' 3 | 4 | declare module 'styled-components' { 5 | export interface DefaultTheme extends Theme {} 6 | } 7 | -------------------------------------------------------------------------------- /src/ButtonGroup/index.ts: -------------------------------------------------------------------------------- 1 | import ButtonGroup from './ButtonGroup' 2 | import ButtonGroupRoot from './ButtonGroupRoot' 3 | 4 | const ButtonGroupComponents = { 5 | ButtonGroupRoot, 6 | } 7 | 8 | export { ButtonGroup, ButtonGroupComponents } 9 | -------------------------------------------------------------------------------- /src/Styleguide/theme/zIndex.ts: -------------------------------------------------------------------------------- 1 | import { ZIndexSet } from './types' 2 | 3 | const zIndex: ZIndexSet = { 4 | app: 500, 5 | drawer: 1200, 6 | modal: 1300, 7 | snackbar: 1400, 8 | tooltip: 1500, 9 | } 10 | 11 | export default zIndex 12 | -------------------------------------------------------------------------------- /src/Button/mixin/iconOnly.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | 3 | export default ({ iconOnly }: StyledProps<{ iconOnly: boolean }>) => 4 | iconOnly && 5 | css` 6 | &:hover { 7 | background: none; 8 | } 9 | ` 10 | -------------------------------------------------------------------------------- /src/CircularProgress/keyframe/circularRotateKeyframe.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components' 2 | 3 | export default keyframes` 4 | 0% { 5 | transform: rotate(0deg); 6 | } 7 | 100% { 8 | transform: rotate(360deg); 9 | } 10 | ` 11 | -------------------------------------------------------------------------------- /src/Grid/index.ts: -------------------------------------------------------------------------------- 1 | import Grid from './Grid' 2 | import GridRoot from './GridRoot' 3 | import type { GridSize } from './types' 4 | 5 | const GridComponents = { 6 | GridRoot, 7 | } 8 | 9 | export { Grid, GridComponents } 10 | export type { GridSize } 11 | -------------------------------------------------------------------------------- /.releaserc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | branches: ['main'], 3 | plugins: [ 4 | '@semantic-release/commit-analyzer', 5 | '@semantic-release/release-notes-generator', 6 | '@semantic-release/npm', 7 | '@semantic-release/github', 8 | ], 9 | } 10 | -------------------------------------------------------------------------------- /src/Container/index.ts: -------------------------------------------------------------------------------- 1 | import Container from './Container' 2 | import ContainerRoot from './ContainerRoot' 3 | import { Behavior } from './types' 4 | 5 | const ContainerComponents = { 6 | ContainerRoot, 7 | } 8 | 9 | export { Container, ContainerComponents, Behavior } 10 | -------------------------------------------------------------------------------- /src/Divider/index.ts: -------------------------------------------------------------------------------- 1 | import Divider from './Divider' 2 | import DividerRoot from './DividerRoot' 3 | import { Display, Orientation } from './types' 4 | 5 | const DividerComponents = { 6 | DividerRoot, 7 | } 8 | 9 | export { Divider, DividerComponents, Display, Orientation } 10 | -------------------------------------------------------------------------------- /src/Styleguide/mixin/margin.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | import { Size } from '../types' 3 | 4 | export default (props: StyledProps<{ spacing: Size | false }>) => css` 5 | margin: ${props.spacing ? props.theme.spacing.size[props.spacing].rem() : 0}; 6 | ` 7 | -------------------------------------------------------------------------------- /src/Typography/index.ts: -------------------------------------------------------------------------------- 1 | import Typography from './Typography' 2 | import TypographyRoot from './TypographyRoot' 3 | 4 | import {TypographyAlign} from './types' 5 | 6 | const TypographyComponents = { TypographyRoot } 7 | 8 | export { Typography, TypographyComponents, TypographyAlign } 9 | -------------------------------------------------------------------------------- /src/Styleguide/mixin/spacing.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | import { Size } from '../types' 3 | 4 | export default (props: StyledProps<{ spacing: Size | false }>) => css` 5 | padding: ${props.spacing ? props.theme.spacing.size[props.spacing].rem() : 0}; 6 | ` 7 | -------------------------------------------------------------------------------- /src/Drawer/DrawerContent.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import {} from '@mycompany/design-system/Styleguide' 3 | 4 | type Props = {} 5 | 6 | export default styled.div` 7 | display: flex; 8 | flex: 1; 9 | flex-direction: column; 10 | overflow: auto; 11 | ` 12 | -------------------------------------------------------------------------------- /src/Typography/types.ts: -------------------------------------------------------------------------------- 1 | import { TypographyUnit } from '@mycompany/design-system/Styleguide' 2 | 3 | export type DisplayComponentMap = { 4 | [key in TypographyUnit]: keyof JSX.IntrinsicElements 5 | } 6 | 7 | export enum TypographyAlign { 8 | Right = 'right', 9 | Left = 'left', 10 | } 11 | -------------------------------------------------------------------------------- /src/Styleguide/theme/shape.ts: -------------------------------------------------------------------------------- 1 | import { SizeValue } from '../value' 2 | import { Shape } from './types' 3 | 4 | const shape: Shape = { 5 | // atm it would be 5px, but Borstie suggested a 3px value 6 | borderRadius: new SizeValue(3), 7 | progressSickness: 3.6, 8 | } 9 | 10 | export default shape 11 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # example owners file: 2 | # https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-code-owners#example-of-a-codeowners-file 3 | 4 | # sre-team owns the repository settings managed by probot 5 | .github/settings.yml @mycompany/sre-team 6 | -------------------------------------------------------------------------------- /src/Drawer/DrawerTitleRoot.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import {} from '@mycompany/design-system/Styleguide' 3 | 4 | type Props = {} 5 | 6 | export default styled.div` 7 | align-items: center; 8 | display: flex; 9 | padding: ${({ theme }) => theme.spacing.size.medium.rem()}; 10 | ` 11 | -------------------------------------------------------------------------------- /src/ReactUtils/utils/index.ts: -------------------------------------------------------------------------------- 1 | import getCurrentBreakpoint from './getCurrentBreakpoint' 2 | import { 3 | isBreakpointGreaterThan, 4 | isBreakpointSmallerThan, 5 | } from './breakpointComparison' 6 | 7 | export { 8 | getCurrentBreakpoint, 9 | isBreakpointGreaterThan, 10 | isBreakpointSmallerThan, 11 | } 12 | -------------------------------------------------------------------------------- /src/Drawer/DrawerTitleClose.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Button } from '@mycompany/design-system/Button' 3 | 4 | export default styled(Button)` 5 | color: ${({ theme }) => theme.color.variant.secondary.font.hex()}; 6 | margin-bottom: 0; 7 | margin-top: 0; 8 | position: absolute; 9 | right: 15px; 10 | ` 11 | -------------------------------------------------------------------------------- /test-runner-jest.config.js: -------------------------------------------------------------------------------- 1 | const { getJestConfig } = require('@storybook/test-runner') 2 | 3 | module.exports = { 4 | // The default configuration comes from @storybook/test-runner 5 | ...getJestConfig(), 6 | /** Add your own overrides below 7 | * @see https://jestjs.io/docs/configuration 8 | */ 9 | coverageProvider: 'v8', 10 | } 11 | -------------------------------------------------------------------------------- /src/Button/mixin/fullWidth.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | import { Size } from '@mycompany/design-system/Styleguide' 3 | 4 | export default ({ 5 | fullWidth, 6 | }: StyledProps<{ fullWidth: boolean; elementSpacing: Size | false }>) => 7 | fullWidth && 8 | css` 9 | display: flex; 10 | width: 100%; 11 | ` 12 | -------------------------------------------------------------------------------- /src/Styleguide/query/types.ts: -------------------------------------------------------------------------------- 1 | import { ThemedCssFunction, DefaultTheme } from 'styled-components' 2 | import { Size } from '../types' 3 | 4 | export interface QuerySet { 5 | min: (key: Size) => ThemedCssFunction 6 | max: (key: Size) => ThemedCssFunction 7 | between: (start: Size, end: Size) => ThemedCssFunction 8 | } 9 | -------------------------------------------------------------------------------- /src/Typography/mixin/status.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | import { Status } from '@mycompany/design-system/Styleguide' 3 | 4 | export default ({ status, theme }: StyledProps<{ status: Status }>) => 5 | status && 6 | status !== Status.Default && 7 | css` 8 | color: ${theme.color.status[status].base.hex()}; 9 | ` 10 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react", 4 | "target": "es5", 5 | "allowSyntheticDefaultImports": true, 6 | "moduleResolution": "node", 7 | "baseUrl": "./", 8 | "paths": { 9 | "@mycompany/design-system/*": [ 10 | "./src/*" 11 | ] 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | .vscode 16 | 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | 21 | #build/dist 22 | dist 23 | dist-storybook 24 | .jest-test-results.json -------------------------------------------------------------------------------- /src/Drawer/DrawerTitleContent.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { mixin } from '@mycompany/design-system/Styleguide' 3 | 4 | type Props = {} 5 | 6 | export default styled.div` 7 | ${mixin.typography.headline3} 8 | display: flex; 9 | flex-grow: 1; 10 | overflow: hidden; 11 | padding-right: ${({ theme }) => theme.spacing.size.medium.rem()}; 12 | ` 13 | -------------------------------------------------------------------------------- /src/Button/mixin/noBackground.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | 3 | export default ({ 4 | noBackground, 5 | theme, 6 | }: StyledProps<{ 7 | noBackground: boolean 8 | }>) => 9 | noBackground && 10 | css` 11 | background: transparent; 12 | &:hover { 13 | background: none; 14 | color: ${theme.color.variant.primary.hover.hex()}; 15 | } 16 | ` 17 | -------------------------------------------------------------------------------- /src/ReactUtils/hooks/useDebounce.ts: -------------------------------------------------------------------------------- 1 | export default () => 2 | any>(func: F, waitFor: number) => { 3 | let timeout: ReturnType 4 | 5 | const debounced = (...args: any) => { 6 | clearTimeout(timeout) 7 | timeout = setTimeout(() => func(...args), waitFor) 8 | } 9 | 10 | return debounced as (...args: Parameters) => ReturnType 11 | } 12 | -------------------------------------------------------------------------------- /src/CircularProgress/keyframe/circularDashKeyframe.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'styled-components' 2 | 3 | export default keyframes` 4 | 0% { 5 | stroke-dasharray: 1px, 200px; 6 | stroke-dashoffset: 0; 7 | } 8 | 50% { 9 | stroke-dasharray: 100px, 200px; 10 | stroke-dashoffset: -15px; 11 | } 12 | 100% { 13 | stroke-dasharray: 100px, 200px; 14 | stroke-dashoffset: -125px; 15 | } 16 | ` 17 | -------------------------------------------------------------------------------- /src/CssBaseline/CssBaseline.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | 3 | 4 | 5 | # CssBaseline 6 | 7 | Injects global styles and normalization css 8 | 9 | ```tsx 10 | import CssBaseline from '@mycompany/design-system/CssBaseline' 11 | 12 | const MyApp = ( 13 | 14 | 15 | 16 | 17 | ) 18 | ``` 19 | -------------------------------------------------------------------------------- /src/Typography/mixin/variant.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | import { Variant } from '@mycompany/design-system/Styleguide' 3 | 4 | export default ({ 5 | theme, 6 | variant, 7 | }: StyledProps<{ 8 | variant: Variant 9 | }>) => css` 10 | color: ${variant === Variant.Primary 11 | ? theme.color.variant[variant].base.hex() 12 | : theme.color.variant[variant].font.hex()}; 13 | ` 14 | -------------------------------------------------------------------------------- /src/Button/ButtonLoadingIndicator.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { CircularProgress } from '@mycompany/design-system/CircularProgress' 3 | import { Size } from '@mycompany/design-system/Styleguide' 4 | 5 | export default styled(CircularProgress)<{ size: Size }>` 6 | margin-top: ${({ size, theme }) => 7 | theme.spacing.size[size].multiply(-1).px()}; 8 | position: absolute; 9 | top: 50%; 10 | ` 11 | -------------------------------------------------------------------------------- /src/Image/ImageRoot.tsx: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components' 2 | import { ObjectFit, Size } from '@mycompany/design-system/Styleguide' 3 | 4 | type Props = { 5 | spacing: Size 6 | src: string 7 | objectFit?: ObjectFit 8 | } 9 | export default styled.img` 10 | margin: 0; 11 | width: 100%; 12 | 13 | ${({ objectFit }) => 14 | objectFit && 15 | css` 16 | object-fit: ${objectFit}; 17 | `} 18 | ` 19 | -------------------------------------------------------------------------------- /src/Styleguide/mixin/Mixin.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | 3 | 4 | 5 | # Mixins 6 | 7 | There are multiple useable mixins for styled-components 8 | 9 | ## Usage 10 | 11 | ```tsx 12 | import { mixin } from '@mycompany/design-system/Styleguide' 13 | import styled from 'styled-components' 14 | 15 | export default styled.div` 16 | ${mixin.typography.headline3} 17 | ` 18 | ``` 19 | -------------------------------------------------------------------------------- /src/Drawer/DrawerProvider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DEFAULT_IDENTIFIER } from './constants' 3 | 4 | type Props = React.PropsWithChildren<{ 5 | identifier?: string 6 | }> 7 | 8 | const DrawerProvider: React.FC = React.memo( 9 | ({ identifier = DEFAULT_IDENTIFIER, children }: Props) => ( 10 | <> 11 |
{children}
12 | 13 | ) 14 | ) 15 | 16 | export default DrawerProvider 17 | -------------------------------------------------------------------------------- /src/Styleguide/theme/elevation.ts: -------------------------------------------------------------------------------- 1 | import { Elevation } from './types' 2 | 3 | const elevation: Elevation = { 4 | none: 'none', 5 | primary: 6 | '0 0 3px rgba(0,0,0,0.2), 0 0px 3px rgba(0,0,0,0.14), 0 0px 3px rgba(0,0,0,0.14)', 7 | secondary: '0 2px 5px rgba(42,42,42,0.1)', 8 | modal: 9 | '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', 10 | } 11 | 12 | export default elevation 13 | -------------------------------------------------------------------------------- /src/ReactUtils/utils/getCurrentBreakpoint.ts: -------------------------------------------------------------------------------- 1 | import { Size, theme } from '@mycompany/design-system/Styleguide' 2 | 3 | export default (windowWidth: number): Size => { 4 | let currentBreakpoint = Size.Tiny 5 | Object.keys(Size).some((key: string) => { 6 | if (theme.breakpoint[Size[key]].plain() > windowWidth) { 7 | return true 8 | } 9 | currentBreakpoint = Size[key] 10 | return false 11 | }) 12 | 13 | return currentBreakpoint 14 | } 15 | -------------------------------------------------------------------------------- /src/Button/ButtonLabel.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Size } from '@mycompany/design-system/Styleguide' 3 | 4 | type Props = { 5 | size: Size 6 | isLoading: boolean 7 | } 8 | 9 | export default styled.span` 10 | display: flex; 11 | flex-grow: 1; 12 | font-size: inherit; 13 | justify-content: center; 14 | opacity: ${({ isLoading }) => (isLoading ? '0.3' : '1')}; 15 | text-align: center; 16 | white-space: nowrap; 17 | ` 18 | -------------------------------------------------------------------------------- /src/Button/mixin/elevation.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | import { ElevationLevel } from '@mycompany/design-system/Styleguide' 3 | 4 | export default ({ 5 | theme, 6 | elevation, 7 | }: StyledProps<{ elevation: ElevationLevel }>) => 8 | elevation !== ElevationLevel.None && 9 | css` 10 | box-shadow: ${theme.elevation[elevation]}; 11 | 12 | &:active { 13 | box-shadow: ${theme.elevation[elevation]}; 14 | } 15 | ` 16 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. 4 | 5 | ## Approach 6 | 7 | _How does this change address the problem?_ 8 | 9 | ## Related Tickets 10 | 11 | Related #(ticket or issue) 12 | 13 | ## Stakeholder 14 | 15 | **Approved** 16 | 17 | - [ ] UX 18 | - [ ] Design 19 | - [ ] Product 20 | -------------------------------------------------------------------------------- /src/Icon/ChevronUpIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SvgIcon } from './base' 3 | import { IconName, Props } from './types' 4 | 5 | const ChevronUpIcon: React.FC = () => ( 6 | 13 | 14 | 15 | ) 16 | 17 | export default ChevronUpIcon 18 | -------------------------------------------------------------------------------- /src/Navigation/index.ts: -------------------------------------------------------------------------------- 1 | import NavigationItem from './NavigationItem' 2 | import Navigation from './Navigation' 3 | import { NavigationFooterLink } from './NavigationFooterLink' 4 | import { NavigationHeaderLink } from './NavigationHeaderLink' 5 | 6 | const NavigationComponents = { 7 | NavigationItem, 8 | Navigation, 9 | } 10 | 11 | export { 12 | NavigationComponents, 13 | Navigation, 14 | NavigationItem, 15 | NavigationHeaderLink, 16 | NavigationFooterLink, 17 | } 18 | -------------------------------------------------------------------------------- /src/Icon/ChevronDownIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SvgIcon } from './base' 3 | import { IconName, Props } from './types' 4 | 5 | const ChevronDownIcon: React.FC = () => ( 6 | 13 | 14 | 15 | ) 16 | 17 | export default ChevronDownIcon 18 | -------------------------------------------------------------------------------- /src/Button/index.ts: -------------------------------------------------------------------------------- 1 | import Button from './Button' 2 | import ButtonRoot from './ButtonRoot' 3 | import ButtonLabel from './ButtonLabel' 4 | import ButtonAttachment from './ButtonAttachment' 5 | import ButtonLoadingIndicator from './ButtonLoadingIndicator' 6 | import { AttachmentPos } from './types' 7 | 8 | const ButtonComponents = { 9 | ButtonRoot, 10 | ButtonLabel, 11 | ButtonAttachment, 12 | ButtonLoadingIndicator, 13 | } 14 | 15 | export { Button, ButtonComponents, AttachmentPos } 16 | -------------------------------------------------------------------------------- /src/Icon/ChevronRightIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SvgIcon } from './base' 3 | import { IconName, Props } from './types' 4 | 5 | const ChevronRightIcon: React.FC = () => ( 6 | 13 | 14 | 15 | ) 16 | 17 | export default ChevronRightIcon 18 | -------------------------------------------------------------------------------- /src/Navigation/NavigationItemRoot.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Size } from '@mycompany/design-system/Styleguide' 3 | 4 | type Props = { 5 | spacing?: Size 6 | } 7 | 8 | export default styled.li` 9 | align-items: center; 10 | color: ${({ theme }) => theme.color.font.hex()}; 11 | display: flex; 12 | width: 100%; 13 | ${({ theme, spacing }) => 14 | spacing && 15 | ` 16 | padding: ${theme.spacing.size[spacing].rem()} 0; 17 | `} 18 | ` 19 | -------------------------------------------------------------------------------- /src/Icon/SearchIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SvgIcon } from './base' 3 | import { IconName, Props } from './types' 4 | 5 | const SearchIcon: React.FC = () => ( 6 | 13 | 14 | 15 | 16 | ) 17 | 18 | export default SearchIcon 19 | -------------------------------------------------------------------------------- /docs/preview/SpacingPreview.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SizeValue } from '@mycompany/design-system/Styleguide' 3 | import './preview.css' 4 | 5 | type Props = { 6 | spacing: SizeValue 7 | } 8 | 9 | const SpacingPreview: React.FC = ({ spacing }: Props) => ( 10 |
11 |
12 | {spacing.rem()} 13 |
14 | {spacing.px()} 15 |
16 |
17 | ) 18 | 19 | export default SpacingPreview 20 | -------------------------------------------------------------------------------- /src/CircularProgress/index.ts: -------------------------------------------------------------------------------- 1 | import CircularProgress from './CircularProgress' 2 | import CircularProgressRoot from './CircularProgressRoot' 3 | import CircularProgressCircle from './CircularProgressCircle' 4 | import CircularProgressSVG from './CircularProgressSVG' 5 | import { State as CircularProgressState } from './types' 6 | 7 | const CircularProgressComponents = { 8 | CircularProgressRoot, 9 | CircularProgressCircle, 10 | CircularProgressSVG, 11 | } 12 | 13 | export { CircularProgress, CircularProgressComponents, CircularProgressState } 14 | -------------------------------------------------------------------------------- /src/CssGrid/index.ts: -------------------------------------------------------------------------------- 1 | import CssGrid from './CssGrid' 2 | import { CssGridRoot } from './CssGridStyles' 3 | import { 4 | GridAlignContent, 5 | GridAlignItems, 6 | GridJustify, 7 | GridDirection, 8 | GridArea, 9 | GridColumn, 10 | GridAutoFlow, 11 | } from './types' 12 | 13 | const CssGridComponents = { 14 | CssGridRoot, 15 | } 16 | export { 17 | GridAlignContent, 18 | GridAlignItems, 19 | GridJustify, 20 | GridDirection, 21 | GridArea, 22 | GridColumn, 23 | GridAutoFlow, 24 | } 25 | export { CssGrid, CssGridComponents } 26 | -------------------------------------------------------------------------------- /src/Button/mixin/index.ts: -------------------------------------------------------------------------------- 1 | import disabled from './disabled' 2 | import fullWidth from './fullWidth' 3 | import pill from './pill' 4 | import size from './size' 5 | import status from './status' 6 | import variant from './variant' 7 | import elevation from './elevation' 8 | import link from './link' 9 | import noBackground from './noBackground' 10 | import iconOnly from './iconOnly' 11 | 12 | export { 13 | disabled, 14 | fullWidth, 15 | pill, 16 | size, 17 | status, 18 | variant, 19 | elevation, 20 | link, 21 | noBackground, 22 | iconOnly, 23 | } 24 | -------------------------------------------------------------------------------- /src/Styleguide/theme/Transition.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import theme from './' 3 | import { Easing, Duration } from '../types' 4 | import { SpacingPreview } from '../../../docs/preview' 5 | 6 | 7 | 8 | # Transition 9 | 10 | ## Easing 11 | 12 |
    13 | {Object.keys(Easing).map((name) => ( 14 |
  • {name}
    • 15 | ))} 16 |
17 | 18 | ## Duration 19 | 20 |
    21 | {Object.keys(Duration).map((name) => ( 22 |
  • {name}
    • 23 | ))} 24 |
25 | -------------------------------------------------------------------------------- /src/Icon/CheckboxUncheckedIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SvgIcon } from './base' 3 | import { IconName, Props } from './types' 4 | 5 | const CheckboxUncheckedIcon: React.FC = ({ fill }: Props) => ( 6 | 14 | 15 | 16 | ) 17 | 18 | export default CheckboxUncheckedIcon 19 | -------------------------------------------------------------------------------- /src/Styleguide/theme/breakpoint.ts: -------------------------------------------------------------------------------- 1 | import { Size } from '../types' 2 | import { BreakpointSet } from './types' 3 | import { SizeValue } from '../value' 4 | 5 | // Keep the order from small to big as we do build prioritized maps to compare sizes 6 | const breakpoint: BreakpointSet = { 7 | [Size.Zero]: new SizeValue(0), 8 | [Size.Tiny]: new SizeValue(380), 9 | [Size.Small]: new SizeValue(768), 10 | [Size.Medium]: new SizeValue(960), 11 | [Size.Large]: new SizeValue(1280), 12 | [Size.ExtraLarge]: new SizeValue(1600), 13 | } 14 | 15 | export default breakpoint 16 | -------------------------------------------------------------------------------- /src/Button/ButtonAttachment.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Size } from '@mycompany/design-system/Styleguide' 3 | 4 | type Props = { 5 | size: Size 6 | isLoading: boolean 7 | } 8 | 9 | export default styled.span` 10 | display: flex; 11 | font-size: inherit; 12 | opacity: ${({ isLoading }) => (isLoading ? '0.5' : '1')}; 13 | ${({ size }) => 14 | (size === Size.Small || size === Size.Tiny) && 15 | `width: 20px; 16 | svg { 17 | width: 100%; 18 | } 19 | `} 20 | &:only-child { 21 | padding: 0; 22 | } 23 | ` 24 | -------------------------------------------------------------------------------- /src/Icon/CheckboxCheckedIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SvgIcon } from './base' 3 | import { IconName, Props } from './types' 4 | 5 | const CheckboxCheckedIcon: React.FC = () => ( 6 | 13 | 14 | 15 | 16 | ) 17 | 18 | export default CheckboxCheckedIcon 19 | -------------------------------------------------------------------------------- /src/Icon/HeartIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SvgIcon } from './base' 3 | import { IconName, Props } from './types' 4 | 5 | const HeartIcon: React.FC = ({ fill }: Props) => ( 6 | 13 | 14 | 15 | ) 16 | 17 | export default HeartIcon 18 | -------------------------------------------------------------------------------- /src/Styleguide/theme/spacing.ts: -------------------------------------------------------------------------------- 1 | import { SizeValue } from '../value' 2 | import { Spacing } from './types' 3 | import { Size } from '../types' 4 | 5 | const baseScale = new SizeValue(8) 6 | 7 | const baseZero = new SizeValue(0) 8 | 9 | const spacing: Spacing = { 10 | base: baseScale, 11 | size: { 12 | [Size.Zero]: baseZero, 13 | [Size.Tiny]: baseScale.multiply(0.25), 14 | [Size.Small]: baseScale.multiply(0.5), 15 | [Size.Medium]: baseScale, 16 | [Size.Large]: baseScale.multiply(2), 17 | [Size.ExtraLarge]: baseScale.multiply(4), 18 | }, 19 | } 20 | 21 | export default spacing 22 | -------------------------------------------------------------------------------- /src/Button/mixin/link.ts: -------------------------------------------------------------------------------- 1 | import { css, StyledProps } from 'styled-components' 2 | 3 | export default ({ 4 | link, 5 | theme, 6 | }: StyledProps<{ 7 | link: boolean 8 | }>) => 9 | link && 10 | css` 11 | background: transparent; 12 | color: ${theme.color.variant.primary.base.hex()}; 13 | padding-left: 0; 14 | padding-right: 0; 15 | &:hover { 16 | background: transparent; 17 | color: ${theme.color.variant.primary.hover.hex()}; 18 | } 19 | &:active { 20 | background: transparent; 21 | color: ${theme.color.variant.primary.active.hex()}; 22 | } 23 | ` 24 | -------------------------------------------------------------------------------- /src/Styleguide/index.ts: -------------------------------------------------------------------------------- 1 | import theme, { Theme, TypographyUnit } from './theme' 2 | import { ColorValue, SizeValue } from './value' 3 | import mixin from './mixin' 4 | import query from './query' 5 | 6 | export { 7 | Duration, 8 | Easing, 9 | FlexboxAlignment, 10 | FlexboxDirection, 11 | FlexboxJustification, 12 | FlexboxAlignContent, 13 | FlexboxAlignItems, 14 | FlexboxWrap, 15 | FontWeight, 16 | Size, 17 | Status, 18 | Variant, 19 | ElevationLevel, 20 | ObjectFit, 21 | } from './types' 22 | export { theme, mixin, query, TypographyUnit, ColorValue, SizeValue } 23 | export type { Theme } 24 | -------------------------------------------------------------------------------- /src/Navigation/NavigationHeaderLink.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Size } from '../Styleguide' 3 | type Props = { 4 | spacing?: Size 5 | first?: boolean 6 | } 7 | export const NavigationHeaderLink = styled.a` 8 | border-bottom: 2px solid transparent; 9 | color: inherit; 10 | 11 | ${({theme, spacing}) => spacing && ` 12 | padding: 0 ${theme.spacing.size[spacing].rem()}; 13 | `} 14 | ${({first}) => first && ` 15 | padding-left: 0; 16 | `} 17 | &:hover { 18 | border-bottom-color: ${({ theme }) => 19 | theme.color.variant.primary.base.hex()}; 20 | } 21 | ` 22 | -------------------------------------------------------------------------------- /src/ThemeProvider/ThemeProvider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components' 4 | import { theme } from '@mycompany/design-system/Styleguide' 5 | 6 | type Props = React.PropsWithChildren<{}> 7 | 8 | const StyleProvider: React.FC = ({ children }: Props) => ( 9 | 10 | {children} 11 | 12 | ) 13 | 14 | StyleProvider.propTypes = { 15 | children: PropTypes.node.isRequired, 16 | } 17 | 18 | export default StyleProvider 19 | -------------------------------------------------------------------------------- /src/Icon/UserIcon.tsx: -------------------------------------------------------------------------------- 1 | import { SvgIcon } from '@mycompany/design-system/Icon/base' 2 | import React, { FC } from 'react' 3 | import { IconName, Props } from './types' 4 | 5 | const UserIcon: FC = ({ fill }) => ( 6 | 15 | 16 | 17 | 18 | ) 19 | 20 | export default UserIcon 21 | -------------------------------------------------------------------------------- /src/Hidden/Hidden.tsx: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components' 2 | import { Size } from '../Styleguide' 3 | 4 | type HiddenProps = { 5 | up?: Size | false 6 | down?: Size | false 7 | } 8 | 9 | const Hidden = styled.div` 10 | ${({ up, theme }) => 11 | up && 12 | css` 13 | @media (min-width: ${theme.breakpoint[up].px()}) { 14 | display: none; 15 | } 16 | `} 17 | 18 | ${({ down, theme }) => 19 | down && 20 | css` 21 | @media (max-width: ${theme.breakpoint[down].px()}) { 22 | display: none; 23 | } 24 | `} 25 | ` 26 | 27 | export default Hidden -------------------------------------------------------------------------------- /src/Icon/BurgerIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SvgIcon } from './base' 3 | import { IconName, Props } from './types' 4 | 5 | const BurgerIcon: React.FC = ({ fill }: Props) => ( 6 | 15 | 16 | 17 | 18 | 19 | ) 20 | 21 | export default BurgerIcon 22 | -------------------------------------------------------------------------------- /src/Styleguide/theme/Shape.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import theme from './' 3 | 4 | 5 | 6 | 15 | 16 | # Shape 17 | 18 | ## Border Radius 19 | 20 |

21 | Global Border radius is {theme.shape.borderRadius.rem()} or{' '} 22 | {theme.shape.borderRadius.px()} 23 |

24 | 25 |
26 | -------------------------------------------------------------------------------- /src/Icon/base/IconHover.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Size, Variant } from '@mycompany/design-system/Styleguide' 3 | import IconHoverRoot from './IconHoverRoot' 4 | 5 | type Props = { 6 | spacing?: Size | 0 7 | children?: React.ReactNode 8 | variant?: Variant 9 | } 10 | 11 | const defaultSpacing = Size.Medium 12 | const defaultVariant = Variant.Secondary 13 | 14 | const IconHover: React.FC = ({ 15 | children, 16 | variant = defaultVariant, 17 | spacing = defaultSpacing, 18 | }: Props) => ( 19 | 20 | {children} 21 | 22 | ) 23 | 24 | export default IconHover 25 | -------------------------------------------------------------------------------- /src/Styleguide/theme/Breakpoint.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import theme from './' 3 | 4 | 5 | 6 | # Breakpoint 7 | 8 | Breakpoints are always handled with px units to not interfere with the rem baseFont behavior and prevent flickering 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {Object.keys(theme.breakpoint).map((name) => ( 19 | 20 | 21 | 22 | 23 | ))} 24 | 25 |
NameSize
{name}{theme.breakpoint[name].px()}
26 | -------------------------------------------------------------------------------- /docs/Introduction.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import packageJson from '../package.json' 3 | 4 | 5 | 6 |
7 | 
Version: {packageJson.version}
8 |
9 |
10 |

11 | The mycompany Design System was created for more efficiently. The Design 12 | System is the source of truth for Developer and Designer for Build 13 | consistency and quality Components for a better Userfaces. 14 |

15 |

16 | First Step please read Getting Started and read the Documentation for your 17 | division (Design/Develop) 18 |

19 |
20 | -------------------------------------------------------------------------------- /src/Styleguide/theme/index.ts: -------------------------------------------------------------------------------- 1 | import color from './color' 2 | import shape from './shape' 3 | import palette from './palette' 4 | import spacing from './spacing' 5 | import transition from './transition' 6 | import typography from './typography' 7 | import elevation from './elevation' 8 | import breakpoint from './breakpoint' 9 | import zIndex from './zIndex' 10 | import { Theme, TypographyUnit } from './types' 11 | 12 | const theme: Theme = { 13 | color, 14 | shape, 15 | typography, 16 | spacing, 17 | palette, 18 | transition, 19 | elevation, 20 | breakpoint, 21 | zIndex, 22 | } 23 | 24 | export type { Theme } 25 | export { TypographyUnit } 26 | export default theme 27 | -------------------------------------------------------------------------------- /docs/preview/ColorPreview.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ColorValue } from '@mycompany/design-system/Styleguide' 3 | import './preview.css' 4 | 5 | type Props = { 6 | color: ColorValue 7 | } 8 | 9 | const ColorPreview: React.FC = ({ color }: Props) => ( 10 |
11 | 40 | 45 | 50 |
51 |
52 | ))} 53 | 54 | -------------------------------------------------------------------------------- /src/Styleguide/Types.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | 3 | 4 | 5 | # Enum 6 | 7 | A selection of Typescript Types to guarantee a consitent property handling all over the ecosystem and to create a common sense of vocabulary to use in terms of talking about component states 8 | 9 | ## Enums 10 | 11 | ### Size 12 | 13 | `Size.Tiny` 14 | `Size.Small` 15 | `Size.Medium` 16 | `Size.Large` 17 | `Size.ExtraLarge` 18 | 19 | ### Status 20 | 21 | `Status.Default` 22 | `Status.Success` 23 | `Status.Warning` 24 | `Status.Error` 25 | 26 | ### Variant 27 | 28 | `Variant.Primary` 29 | `Variant.Secondary` 30 | 31 | ### FontWeight 32 | 33 | `FontWeight.Light` 34 | `FontWeight.Regular` 35 | `FontWeight.Bold` 36 | 37 | ### Easing 38 | 39 | `Easing.EaseIn` 40 | `Easing.EaseOut` 41 | `Easing.EaseInOut` 42 | `Easing.Sharp` 43 | 44 | ### Duration 45 | 46 | `Duration.Shortest` 47 | `Duration.Shorter` 48 | `Duration.Short` 49 | `Duration.Default` 50 | `Duration.Complex` 51 | `Duration.EnteringScreen` 52 | `Duration.LeavingScreen` 53 | 54 | ## Usage 55 | 56 | ```tsx 57 | import React from 'react' 58 | import { Size } from '@mycompany/design-system/Styleguide' 59 | 60 | type Props = { 61 | size: Size 62 | } 63 | 64 | export default ({ size }: Props) => { 65 | if (size === Size.Large) { 66 | return
Large
67 | } 68 | 69 | return
Default
70 | } 71 | ``` 72 | -------------------------------------------------------------------------------- /src/Divider/DividerRoot.ts: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components' 2 | import { Size } from '@mycompany/design-system/Styleguide' 3 | import { Orientation, Display } from './types' 4 | 5 | type Props = { 6 | orientation: Orientation 7 | display: Display 8 | flexItem: boolean 9 | spacing: Size 10 | inverted: boolean 11 | } 12 | 13 | export default styled.hr` 14 | background-color: ${({ theme, inverted }) => 15 | inverted ? theme.color.dividerInverted.hex() : theme.color.divider.hex()}; 16 | border: 0; 17 | box-sizing: border-box; 18 | flex-shrink: 0; 19 | 20 | margin-bottom: ${({ spacing, theme }) => theme.spacing.size[spacing].rem()}; 21 | margin-left: ${({ spacing, theme, display }) => 22 | display === Display.Middle ? theme.spacing.size[spacing].rem() : '0'}; 23 | margin-right: ${({ spacing, theme, display }) => 24 | display === Display.Middle ? theme.spacing.size[spacing].rem() : '0'}; 25 | margin-top: ${({ spacing, theme }) => theme.spacing.size[spacing].rem()}; 26 | 27 | ${({ flexItem }) => 28 | flexItem && 29 | css` 30 | align-self: stretch; 31 | `} 32 | 33 | ${({ orientation }) => 34 | orientation === Orientation.Horizontal && 35 | css` 36 | height: 1px; 37 | width: auto; 38 | `} 39 | 40 | ${({ orientation }) => 41 | orientation === Orientation.Vertical && 42 | css` 43 | height: auto; 44 | width: 1px; 45 | `}; 46 | ` 47 | -------------------------------------------------------------------------------- /src/TextLink/TextLink.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Size, Variant } from '@mycompany/design-system/Styleguide' 3 | import TextLinkRoot from './TextLinkRoot' 4 | 5 | type Props = React.PropsWithChildren<{ 6 | spacing?: Size | 0 7 | href: string 8 | fullWidth?: boolean 9 | className?: string 10 | attachment?: React.ReactNode 11 | variant?: Variant 12 | underline?: boolean | false 13 | }> 14 | 15 | const defaultSpacing = 0 16 | const defaultVariant = Variant.Primary 17 | const defaultUnderline = true 18 | 19 | const TextLink: React.FC = React.forwardRef( 20 | ( 21 | { 22 | href, 23 | attachment, 24 | spacing = defaultSpacing, 25 | className, 26 | fullWidth = false, 27 | variant = defaultVariant, 28 | underline = defaultUnderline, 29 | children, 30 | ...htmlAttributes 31 | }: React.PropsWithChildren, 32 | ref 33 | ) => ( 34 | 46 | {attachment !== null && attachment} 47 | {children !== null && children} 48 | 49 | ) 50 | ) 51 | 52 | export default TextLink 53 | -------------------------------------------------------------------------------- /src/Icon/Visa.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { SvgIcon } from './base' 3 | import { IconName, Props } from './types' 4 | 5 | const Visa: React.FC = ({ payments }: Props) => ( 6 | 13 | 17 | 18 | ) 19 | 20 | export default Visa 21 | -------------------------------------------------------------------------------- /src/Styleguide/theme/Color.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Story } from '@storybook/addon-docs' 2 | import theme from './' 3 | import { ColorPreview } from '../../../docs/preview' 4 | import { ColorValue } from '../value' 5 | 6 | 7 | 8 | # Colors 9 | 10 | ## Misc 11 | 12 | <> 13 | {Object.keys(theme.color).map( 14 | (name) => 15 | theme.color[name] instanceof ColorValue && ( 16 |
17 |

{name}

18 | 19 |
20 | ) 21 | )} 22 | 23 | 24 | ## Variant 25 | 26 | <> 27 | {Object.keys(theme.color.variant).map((variantName) => ( 28 |
29 |

{variantName}

30 | {Object.keys(theme.color.variant[variantName]).map((name) => ( 31 |
32 |

{name}

33 | 34 |
35 | ))} 36 |
37 | ))} 38 | 39 | 40 | ## Status 41 | 42 | <> 43 | {Object.keys(theme.color.status).map((statusName) => ( 44 |
45 |

{statusName}

46 | {Object.keys(theme.color.status[statusName]).map((name) => ( 47 |
48 |

{name}

49 | 50 |
51 | ))} 52 |
53 | ))} 54 | 55 | -------------------------------------------------------------------------------- /src/Navigation/NavigationRoot.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Size } from '@mycompany/design-system/Styleguide' 3 | import NavigationItemRoot from './NavigationItemRoot' 4 | 5 | type Props = { 6 | gridSpacing: Size | false 7 | gridSize: Size | false 8 | orientation?: 'horizontal' | 'vertical' 9 | } 10 | 11 | export default styled.ul` 12 | display: flex; 13 | 14 | flex-direction: ${(props) => 15 | props.orientation === 'vertical' ? 'column' : 'row'}; 16 | & ${NavigationItemRoot} { 17 | flex-basis: auto; 18 | padding: ${({ gridSpacing, theme }) => 19 | gridSpacing ? theme.spacing.size[gridSpacing].rem() : 0} 20 | 0; 21 | ${({ orientation, gridSize, theme }) => 22 | orientation === 'horizontal' && 23 | ` 24 | width: fit-content; 25 | margin: 0 ${gridSize ? theme.spacing.size[gridSize].rem() : 0}; 26 | `} 27 | 28 | ${({ orientation, theme, gridSpacing }) => 29 | orientation === 'vertical' && 30 | ` 31 | padding-right: ${gridSpacing && theme.spacing.size[Size.Medium].rem()}; 32 | justify-content: space-between; 33 | &:first-child { 34 | border-top: 1px solid ${theme.color.divider.hex()}; 35 | } 36 | border-bottom: 1px solid ${theme.color.divider.hex()}; 37 | `} 38 | } 39 | margin: ${({ gridSize, theme }) => 40 | gridSize ? theme.spacing.size[gridSize].rem() : 0} 41 | 0; 42 | padding: 0; 43 | ` 44 | -------------------------------------------------------------------------------- /src/ButtonGroup/ButtonGroup.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ButtonGroup } from './index' 3 | import { ComponentStory, ComponentMeta } from '@storybook/react' 4 | import { Button } from '../Button' 5 | import { FlexboxJustification } from '../Styleguide' 6 | 7 | export default { 8 | /* 👇 The title prop is optional. 9 | * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading 10 | * to learn how to generate automatic titles 11 | */ 12 | title: 'Component/ButtonGroup', 13 | component: ButtonGroup, 14 | argTypes: { 15 | justify: { 16 | options: FlexboxJustification, 17 | control: { type: 'radio' }, 18 | }, 19 | squashed: { 20 | control: { type: 'boolean' }, 21 | }, 22 | }, 23 | } as ComponentMeta 24 | 25 | const Template: ComponentStory = (args) => ( 26 | 27 |