From f073f2d995595e785a710609b7e56cd71202cec4 Mon Sep 17 00:00:00 2001 From: Pablo Perez Date: Sun, 5 Dec 2021 12:20:06 +0100 Subject: [PATCH 01/37] [REMOVE] Bulma dependency --- .../src/lib/atoms/Checkbox.scss | 3 ++- .../src/lib/atoms/Checkbox.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.scss b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.scss index b9b804a59..9de24fe5c 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.scss @@ -1,6 +1,7 @@ -@import '~bulma/sass/utilities/_all'; @import '../styles/_variables.scss'; +$radius: 4px; + .redi-checkbox { position: absolute; z-index: -1000; diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx index 4a38afb18..70867d609 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx @@ -2,7 +2,6 @@ import { Meta } from '@storybook/react/types-6-0' import { storybookTemplate } from '../helpers/StorybookTemplate' import CheckboxComponent from './Checkbox' -import 'bulma/css/bulma.min.css' export default { title: 'atoms/Checkbox', @@ -15,4 +14,5 @@ export const Checkbox = template({ name: 'Checkbox', value: 'ABC', disabled: false, + checked: false }) From a11aaf6782b70c0b0f8cb1d9b5332af5c81f6551 Mon Sep 17 00:00:00 2001 From: Pablo Perez Date: Sun, 5 Dec 2021 12:20:19 +0100 Subject: [PATCH 02/37] [ADD] Checkbox typing --- .../src/lib/atoms/Checkbox.tsx | 12 +++++++----- .../src/lib/molecules/FilterDropdown.tsx | 1 + 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.tsx index a0f6d4299..a75b9da6c 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.tsx @@ -5,16 +5,18 @@ import './Checkbox.scss' interface Props { name: string - value: string + value?: string checked: boolean - children: React.ReactNode - disabled: boolean + children?: React.ReactNode + disabled?: boolean + handleChange?: (...args: any[]) => void + handleBlur?: (...args: any[]) => void + isSubmitting?: boolean className?: string customOnChange?: Function } -// introduce proper types at some point -function Checkbox(props: any) { +function Checkbox(props: Props) { const { name, value, diff --git a/libs/shared-atomic-design-components/src/lib/molecules/FilterDropdown.tsx b/libs/shared-atomic-design-components/src/lib/molecules/FilterDropdown.tsx index a5dfd0d03..93d8f6ca9 100644 --- a/libs/shared-atomic-design-components/src/lib/molecules/FilterDropdown.tsx +++ b/libs/shared-atomic-design-components/src/lib/molecules/FilterDropdown.tsx @@ -67,6 +67,7 @@ const FilterDropdown = ({ {items.map((item) => (
  • onChange(item.value)} checked={selected.includes(item.value)} > From cabc4c81b4cf7f979df6b5d7d730771a143266d2 Mon Sep 17 00:00:00 2001 From: Pablo Perez Date: Sun, 5 Dec 2021 19:47:54 +0100 Subject: [PATCH 03/37] [FIX] Partial arguments for storybook --- .../src/lib/atoms/Checkbox.stories.tsx | 4 +--- .../src/lib/helpers/StorybookTemplate.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx index 70867d609..180fa4a08 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx @@ -13,6 +13,4 @@ const template = storybookTemplate(CheckboxComponent) export const Checkbox = template({ name: 'Checkbox', value: 'ABC', - disabled: false, - checked: false -}) +}) \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/helpers/StorybookTemplate.tsx b/libs/shared-atomic-design-components/src/lib/helpers/StorybookTemplate.tsx index 2e40296c2..7862c211c 100644 --- a/libs/shared-atomic-design-components/src/lib/helpers/StorybookTemplate.tsx +++ b/libs/shared-atomic-design-components/src/lib/helpers/StorybookTemplate.tsx @@ -5,7 +5,7 @@ export const storybookTemplate = ( Component: (props: TPropsType) => StoryFnReactReturnType | null ) => - (props: TPropsType): Story => { + (props: Partial): Story => { const template: Story = (args) => { return } From 5e7d1338ffea914241fd1b24678ffa36529cde04 Mon Sep 17 00:00:00 2001 From: Pablo Perez Date: Sun, 5 Dec 2021 20:03:39 +0100 Subject: [PATCH 04/37] [CHANGE] Better meta typing --- .../src/lib/atoms/Checkbox.stories.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx index 180fa4a08..643cd34cb 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react/types-6-0' +import { ComponentMeta } from '@storybook/react'; import { storybookTemplate } from '../helpers/StorybookTemplate' import CheckboxComponent from './Checkbox' @@ -6,7 +6,15 @@ import CheckboxComponent from './Checkbox' export default { title: 'atoms/Checkbox', component: CheckboxComponent, -} as Meta + argTypes: { + handleChange: { + control: { type: 'object' } + }, + handleBlur: { + control: { type: 'object' } + } + } +} as ComponentMeta const template = storybookTemplate(CheckboxComponent) From 9be79820a12de1400d9fdf2e1e705d5fe0150719 Mon Sep 17 00:00:00 2001 From: Pablo Perez Date: Thu, 16 Dec 2021 20:08:55 +0100 Subject: [PATCH 05/37] [CHANGE] Storybook configuration --- .../.storybook/{main.js => main.ts} | 0 .../.storybook/manager.ts | 29 +++++++++++++++ .../.storybook/{preview.js => preview.ts} | 0 .../.storybook/theme.ts | 37 +++++++++++++++++++ .../.storybook/tsconfig.json | 2 +- .../src/lib/atoms/Button.stories.tsx | 2 +- .../src/lib/atoms/Caption.stories.tsx | 2 +- .../src/lib/atoms/CardTags.stories.tsx | 2 +- .../src/lib/atoms/Checkbox.stories.tsx | 24 ------------ .../lib/atoms/{ => Checkbox}/Checkbox.scss | 2 +- .../lib/atoms/Checkbox/Checkbox.stories.tsx | 29 +++++++++++++++ .../src/lib/atoms/{ => Checkbox}/Checkbox.tsx | 35 +++++++++++------- .../src/lib/atoms/Checkbox/index.ts | 4 ++ .../lib/atoms/DecoratedHeadline.stories.tsx | 2 +- .../src/lib/atoms/FormDatePicker.stories.tsx | 2 +- .../src/lib/atoms/FormInput.stories.tsx | 2 +- .../src/lib/atoms/FormSelect.stories.tsx | 2 +- .../src/lib/atoms/FormTextArea.stories.tsx | 2 +- .../src/lib/atoms/Heading.stories.tsx | 2 +- .../src/lib/atoms/Loader.stories.tsx | 2 +- .../src/lib/atoms/Placeholder.stories.tsx | 2 +- .../src/lib/atoms/SVGImage.stories.tsx | 2 +- .../src/lib/atoms/SearchField.stories.tsx | 2 +- .../lib/atoms/SocialMediaIcons.stories.tsx | 2 +- .../src/lib/atoms/index.ts | 2 +- .../src/lib/helpers/StorybookTemplate.tsx | 20 +++++++--- 26 files changed, 151 insertions(+), 61 deletions(-) rename libs/shared-atomic-design-components/.storybook/{main.js => main.ts} (100%) create mode 100644 libs/shared-atomic-design-components/.storybook/manager.ts rename libs/shared-atomic-design-components/.storybook/{preview.js => preview.ts} (100%) create mode 100644 libs/shared-atomic-design-components/.storybook/theme.ts delete mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx rename libs/shared-atomic-design-components/src/lib/atoms/{ => Checkbox}/Checkbox.scss (97%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.stories.tsx rename libs/shared-atomic-design-components/src/lib/atoms/{ => Checkbox}/Checkbox.tsx (63%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Checkbox/index.ts diff --git a/libs/shared-atomic-design-components/.storybook/main.js b/libs/shared-atomic-design-components/.storybook/main.ts similarity index 100% rename from libs/shared-atomic-design-components/.storybook/main.js rename to libs/shared-atomic-design-components/.storybook/main.ts diff --git a/libs/shared-atomic-design-components/.storybook/manager.ts b/libs/shared-atomic-design-components/.storybook/manager.ts new file mode 100644 index 000000000..32f4a6925 --- /dev/null +++ b/libs/shared-atomic-design-components/.storybook/manager.ts @@ -0,0 +1,29 @@ +import { addons } from '@storybook/addons'; +import ReDITheme from './theme'; + +/** + * @see https://storybook.js.org/docs/vue/configure/features-and-behavior + * */ +addons.setConfig({ + isFullscreen: false, + showNav: true, + showPanel: 'right', + panelPosition: 'bottom', + enableShortcuts: true, + isToolshown: true, + theme: ReDITheme, + selectedPanel: undefined, + initialActive: 'sidebar', + sidebar: { + showRoots: false, + collapsedRoots: [], + }, + toolbar: { + addons: { hidden: false }, + title: { hidden: false }, + zoom: { hidden: true }, + eject: { hidden: false }, + copy: { hidden: false }, + fullscreen: { hidden: false }, + } +}); \ No newline at end of file diff --git a/libs/shared-atomic-design-components/.storybook/preview.js b/libs/shared-atomic-design-components/.storybook/preview.ts similarity index 100% rename from libs/shared-atomic-design-components/.storybook/preview.js rename to libs/shared-atomic-design-components/.storybook/preview.ts diff --git a/libs/shared-atomic-design-components/.storybook/theme.ts b/libs/shared-atomic-design-components/.storybook/theme.ts new file mode 100644 index 000000000..a5f9b0d4d --- /dev/null +++ b/libs/shared-atomic-design-components/.storybook/theme.ts @@ -0,0 +1,37 @@ +import { create } from '@storybook/theming'; + +export default create({ + base: 'light', + + colorPrimary: '#EA5B25', + colorSecondary: '#EA5B25', + + // UI + appBg: '#CDE6F7', + appContentBg: 'white', + appBorderColor: '#d0d0d0', + appBorderRadius: 4, + + // Typography + fontBase: 'proxima-n-w01-reg, Helvetica, sans-serif', + fontCode: 'monospace', + + // Text colors + textColor: '#4a4a49', + textInverseColor: 'rgba(255,255,255,0.9)', + + // Toolbar default and active colors + barTextColor: '#e0e0e0', + barSelectedColor: 'white', + barBg: '#2cb0c7', + + // Form colors + inputBg: 'white', + inputBorder: 'silver', + inputTextColor: 'black', + inputBorderRadius: 4, + + brandTitle: 'ReDI Design System', + brandUrl: 'https://www.redi-school.org/', + brandImage: 'https://static.wixstatic.com/media/206b5b_5b3955c03ad0488cb12b21964327e188~mv2.png/v1/crop/x_11,y_0,w_3978,h_800/fill/w_156,h_30,al_c,q_85,usm_0.66_1.00_0.01/HorizontalReDISchool.webp' +}); \ No newline at end of file diff --git a/libs/shared-atomic-design-components/.storybook/tsconfig.json b/libs/shared-atomic-design-components/.storybook/tsconfig.json index 9c7c2c5f7..4e809544b 100644 --- a/libs/shared-atomic-design-components/.storybook/tsconfig.json +++ b/libs/shared-atomic-design-components/.storybook/tsconfig.json @@ -10,5 +10,5 @@ "../**/*.spec.tsx", "../**/*.spec.jsx" ], - "include": ["../src/**/*", "*.js"] + "include": ["../src/**/*", "*.js", "./*.ts"] } diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Button.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Button.stories.tsx index 191eae830..2fdbcfb63 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Button.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Button.stories.tsx @@ -5,7 +5,7 @@ import { storybookTemplate } from '../helpers/StorybookTemplate' import ButtonComponent from './Button' export default { - title: 'atoms/Button', + title: 'Atoms/Button', component: ButtonComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Caption.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Caption.stories.tsx index 8d660e7f8..34cc7e246 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Caption.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Caption.stories.tsx @@ -5,7 +5,7 @@ import CaptionComponent from './Caption' import 'bulma/css/bulma.min.css' export default { - title: 'atoms/Caption', + title: 'Atoms/Caption', component: CaptionComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/CardTags.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/CardTags.stories.tsx index 371c7eeeb..1c91e384a 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/CardTags.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/CardTags.stories.tsx @@ -5,7 +5,7 @@ import CardTagsComponent from './CardTags' import 'bulma/css/bulma.min.css' export default { - title: 'atoms/Cardtag', + title: 'Atoms/Cardtag', component: CardTagsComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx deleted file mode 100644 index 643cd34cb..000000000 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import { storybookTemplate } from '../helpers/StorybookTemplate' - -import CheckboxComponent from './Checkbox' - -export default { - title: 'atoms/Checkbox', - component: CheckboxComponent, - argTypes: { - handleChange: { - control: { type: 'object' } - }, - handleBlur: { - control: { type: 'object' } - } - } -} as ComponentMeta - -const template = storybookTemplate(CheckboxComponent) - -export const Checkbox = template({ - name: 'Checkbox', - value: 'ABC', -}) \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.scss b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss similarity index 97% rename from libs/shared-atomic-design-components/src/lib/atoms/Checkbox.scss rename to libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss index 9de24fe5c..01dd6bdb4 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss @@ -1,4 +1,4 @@ -@import '../styles/_variables.scss'; +@import '../../styles/_variables.scss'; $radius: 4px; diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.stories.tsx new file mode 100644 index 000000000..6e028143e --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.stories.tsx @@ -0,0 +1,29 @@ +import { ComponentMeta } from '@storybook/react'; +import { storybookTemplate } from '../../helpers/StorybookTemplate' + +import { Checkbox } from '.' + +export default { + title: 'Atoms/Checkbox', + component: Checkbox, + argTypes: { + handleChange: { + control: { type: 'object' } + }, + handleBlur: { + control: { type: 'object' } + } + } +} as ComponentMeta + +const template = storybookTemplate(Checkbox) + +export const Default = template({ + name: 'Checkbox', + value: 'ABC', +}); + +export const Labeled = template({ + name: 'Checkbox', + value: 'ABC', +}, Label) \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.tsx similarity index 63% rename from libs/shared-atomic-design-components/src/lib/atoms/Checkbox.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.tsx index a75b9da6c..c2db34b25 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.tsx @@ -1,21 +1,30 @@ -import React from 'react' +import React, { FocusEventHandler, MouseEventHandler } from 'react' import _uniqueId from 'lodash/uniqueId' -import { Form, Element } from 'react-bulma-components' +import { Form } from 'react-bulma-components' import './Checkbox.scss' interface Props { + /** */ name: string + /** */ value?: string + /** */ checked: boolean + /** */ children?: React.ReactNode + /** */ disabled?: boolean - handleChange?: (...args: any[]) => void - handleBlur?: (...args: any[]) => void + /** */ + handleChange?: MouseEventHandler + /** */ + handleBlur?: FocusEventHandler + /** */ isSubmitting?: boolean - className?: string - customOnChange?: Function + /** */ + customOnChange?: MouseEventHandler } +/** ## Checkbox */ function Checkbox(props: Props) { const { name, @@ -29,31 +38,29 @@ function Checkbox(props: Props) { customOnChange, } = props - const handleOnChange = customOnChange ?? handleChange + const handleOnChange: MouseEventHandler = customOnChange ?? handleChange const uid = _uniqueId('cx_') return ( <> - - {children} - + ) } diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/index.ts new file mode 100644 index 000000000..7b8b98297 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/index.ts @@ -0,0 +1,4 @@ +import { default as Component } from './Checkbox'; + +/** ## Checkbox */ +export const Checkbox = Component \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.stories.tsx index 833652972..8006022e5 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.stories.tsx @@ -5,7 +5,7 @@ import DecoratedHeadlineComponent from './DecoratedHeadline' import 'bulma/css/bulma.min.css' export default { - title: 'atoms/Decoratedheadline', + title: 'Atoms/Decoratedheadline', component: DecoratedHeadlineComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.stories.tsx index 44540365c..6e45fdd65 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.stories.tsx @@ -7,7 +7,7 @@ import 'bulma/css/bulma.min.css' import 'react-datepicker/dist/react-datepicker.css' export default { - title: 'atoms/Formdatepicker', + title: 'Atoms/Formdatepicker', component: FormDatePickerComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormInput.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormInput.stories.tsx index 1209e2f0c..fc3b3bba2 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormInput.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormInput.stories.tsx @@ -12,7 +12,7 @@ enum inputType { } export default { - title: 'atoms/Forminput', + title: 'Atoms/Forminput', component: FormInputComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.stories.tsx index c4b84dd86..40d288aad 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.stories.tsx @@ -6,7 +6,7 @@ import FormSelectComponent from './FormSelect' import 'bulma/css/bulma.min.css' export default { - title: 'atoms/Formselect', + title: 'Atoms/Formselect', component: FormSelectComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.stories.tsx index db5e27810..8ebe03303 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.stories.tsx @@ -5,7 +5,7 @@ import FormTextAreaComponent from './FormTextArea' import 'bulma/css/bulma.min.css' export default { - title: 'atoms/Formtextarea', + title: 'Atoms/Formtextarea', component: FormTextAreaComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Heading.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Heading.stories.tsx index e26c438fc..3190b8129 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Heading.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Heading.stories.tsx @@ -5,7 +5,7 @@ import HeadingComponent from './Heading' import 'bulma/css/bulma.min.css' export default { - title: 'atoms/Heading', + title: 'Atoms/Heading', component: HeadingComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Loader.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Loader.stories.tsx index d64a69650..d8573ba2a 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Loader.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Loader.stories.tsx @@ -4,7 +4,7 @@ import { storybookTemplate } from '../helpers/StorybookTemplate' import LoaderComponent from './Loader' export default { - title: 'atoms/Loader', + title: 'Atoms/Loader', component: LoaderComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Placeholder.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Placeholder.stories.tsx index d20908d75..f13380bb4 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Placeholder.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Placeholder.stories.tsx @@ -5,7 +5,7 @@ import PlaceholderComponent from './Placeholder' import 'bulma/css/bulma.min.css' export default { - title: 'atoms/Placeholder', + title: 'Atoms/Placeholder', component: PlaceholderComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SVGImage.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage.stories.tsx index f96c022ce..57b6ee56c 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/SVGImage.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage.stories.tsx @@ -4,7 +4,7 @@ import { storybookTemplate } from '../helpers/StorybookTemplate' import SVGImageComponent, { SVGImages } from './SVGImage' export default { - title: 'atoms/image', + title: 'Atoms/image', component: SVGImageComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SearchField.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SearchField.stories.tsx index dcba0d726..94fde9da2 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/SearchField.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/SearchField.stories.tsx @@ -5,7 +5,7 @@ import SearchFieldComponent from './SearchField' import 'bulma/css/bulma.min.css' export default { - title: 'atoms/Searchfield', + title: 'Atoms/Searchfield', component: SearchFieldComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons.stories.tsx index 5c8890f60..74fb59649 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons.stories.tsx @@ -4,7 +4,7 @@ import { storybookTemplate } from '../helpers/StorybookTemplate' import SocialMediaIconsComponent from './SocialMediaIcons' export default { - title: 'atoms/Socialmediaicons', + title: 'Atoms/Socialmediaicons', component: SocialMediaIconsComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/index.ts index 64d1bc195..0770ac90d 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/index.ts +++ b/libs/shared-atomic-design-components/src/lib/atoms/index.ts @@ -2,7 +2,7 @@ export { default as Button } from './Button' export { default as Caption } from './Caption' export { default as CardTags } from './CardTags' export * from './CardTags' -export { default as Checkbox } from './Checkbox' +export * from './Checkbox/' export { default as DecoratedHeadline } from './DecoratedHeadline' export { default as FormDraggableAccordion } from './FormDraggableAccordion' export { default as FormInput } from './FormInput' diff --git a/libs/shared-atomic-design-components/src/lib/helpers/StorybookTemplate.tsx b/libs/shared-atomic-design-components/src/lib/helpers/StorybookTemplate.tsx index 7862c211c..a760be953 100644 --- a/libs/shared-atomic-design-components/src/lib/helpers/StorybookTemplate.tsx +++ b/libs/shared-atomic-design-components/src/lib/helpers/StorybookTemplate.tsx @@ -1,15 +1,23 @@ import { Story } from '@storybook/react' import { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types' -export const storybookTemplate = - ( - Component: (props: TPropsType) => StoryFnReactReturnType | null - ) => - (props: Partial): Story => { +/** Creates a Storybook's stories factory for a component*/ +export function storybookTemplate ( + /** Component to be documented */ + Component: (props: TPropsType) => StoryFnReactReturnType | null, +) { + return function ( + /** Properties of the React component */ + props: Partial, + /** React Nodes to be injected in the component's slot */ + Children?: React.ReactNode): Story + { const template: Story = (args) => { + if (Children) return { Children } return - } + } const story = template.bind({}) story.args = props return story } +} From 045d09d7d27d99492f61906a3437b78d0a64fda4 Mon Sep 17 00:00:00 2001 From: Pablo Perez Date: Thu, 16 Dec 2021 21:08:28 +0100 Subject: [PATCH 06/37] [ADD] Component structure --- .vscode/settings.json | 5 +- .../src/lib/atoms/Checkbox/Checkbox.props.ts | 9 ++++ .../src/lib/atoms/Checkbox/Checkbox.scss | 2 +- .../src/lib/atoms/Checkbox/Checkbox.spec.ts | 7 +++ .../lib/atoms/Checkbox/Checkbox.stories.mdx | 5 ++ .../src/lib/atoms/Checkbox/Checkbox.tsx | 52 +++++-------------- .../src/lib/atoms/Checkbox/index.ts | 17 +++++- .../src/lib/typescript/propsInterfaces.ts | 29 +++++++++++ 8 files changed, 84 insertions(+), 42 deletions(-) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.props.ts create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.spec.ts create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.stories.mdx create mode 100644 libs/shared-atomic-design-components/src/lib/typescript/propsInterfaces.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index dfb4345ad..183f7379e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,5 +5,8 @@ "./lib/shared-atomic-design-components", "./libs/shared-types" ], - "typescript.preferences.importModuleSpecifier": "project-relative" + "typescript.preferences.importModuleSpecifier": "project-relative", + "cSpell.words": [ + "redi" + ] } diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.props.ts b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.props.ts new file mode 100644 index 000000000..89de2029e --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.props.ts @@ -0,0 +1,9 @@ +import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react' +import { FormElementProps } from '../../typescript/propsInterfaces'; + +export interface CheckboxProps extends FormElementProps { + /** */ + checked: boolean + /** */ + children?: ReactNode +} \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss index 01dd6bdb4..d41ab0ea1 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss @@ -14,7 +14,7 @@ $radius: 4px; padding: 0; border: 0; - &-label { + &__label { padding: 0.126rem 0 0.126rem 2rem; display: inline-block; position: relative; diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.spec.ts b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.spec.ts new file mode 100644 index 000000000..0c889cea9 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.spec.ts @@ -0,0 +1,7 @@ +import {Checkbox} from '.'; + +describe(Checkbox.name, () => { + it('passes', () => { + expect(true).toBeTruthy() + }) +}) \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.stories.mdx new file mode 100644 index 000000000..333727c1b --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.stories.mdx @@ -0,0 +1,5 @@ + + +# Checkbox + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.tsx index c2db34b25..576c105f5 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.tsx @@ -1,44 +1,20 @@ -import React, { FocusEventHandler, MouseEventHandler } from 'react' +import { CheckboxProps } from './Checkbox.props'; import _uniqueId from 'lodash/uniqueId' import { Form } from 'react-bulma-components' import './Checkbox.scss' -interface Props { - /** */ - name: string - /** */ - value?: string - /** */ - checked: boolean - /** */ - children?: React.ReactNode - /** */ - disabled?: boolean - /** */ - handleChange?: MouseEventHandler - /** */ - handleBlur?: FocusEventHandler - /** */ - isSubmitting?: boolean - /** */ - customOnChange?: MouseEventHandler -} - -/** ## Checkbox */ -function Checkbox(props: Props) { - const { - name, - value, - checked, - disabled, - handleChange, - handleBlur, - isSubmitting, - children, - customOnChange, - } = props +function Checkbox({ + name, + value, + checked, + disabled, + handleChange, + handleBlur, + isSubmitting, + children, + customOnChange, +}: CheckboxProps) { - const handleOnChange: MouseEventHandler = customOnChange ?? handleChange const uid = _uniqueId('cx_') return ( @@ -50,14 +26,14 @@ function Checkbox(props: Props) { value={value} name={name} checked={checked} - onClick={handleOnChange} + onChange={customOnChange ?? handleChange} onBlur={handleBlur} disabled={isSubmitting || disabled} /> diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/index.ts index 7b8b98297..797b3562c 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/index.ts +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/index.ts @@ -1,4 +1,17 @@ import { default as Component } from './Checkbox'; -/** ## Checkbox */ -export const Checkbox = Component \ No newline at end of file +/** ## Checkbox + * + * ... + * + * ```tsx + * changeValue()} + * checked={checkedValue} + * > + * Label of the checkbox + * + * ``` + */ +export const Checkbox = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/typescript/propsInterfaces.ts b/libs/shared-atomic-design-components/src/lib/typescript/propsInterfaces.ts new file mode 100644 index 000000000..ff60a0c14 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/typescript/propsInterfaces.ts @@ -0,0 +1,29 @@ +import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react' + +export interface FormElementProps { + /** The `name` attribute specifies the name of an `` element. + * It's used to reference elements in a JavaScript, or to reference form data after a form is submitted. + * + * **Note:** only form elements with a `name` attribute will have their values passed when submitting a form. + */ + name: string + /** The `value` attribute specifies the value of an `` element. + * It defines the value associated with the input (this is also the value that is sent on submit) + */ + value?: string + /** A disabled `` element is unusable and un-clickable. + * The `disabled` attribute can be set to keep a user from using the `` element until some other condition + * has been met. A value of `false` set for the `disabled` will and make the `` element usable. + * + * **Tip:** disabled `` elements in a form will not be submitted! + */ + disabled?: boolean + /** */ + handleChange?: ChangeEventHandler + /** */ + handleBlur?: FocusEventHandler + /** */ + isSubmitting?: boolean + /** */ + customOnChange?: ChangeEventHandler +} \ No newline at end of file From 87778ce229d214770c6ea2aeb892bb8d8bd8a874 Mon Sep 17 00:00:00 2001 From: Pablo Perez Date: Thu, 16 Dec 2021 21:43:00 +0100 Subject: [PATCH 07/37] [FIX] Namespaced colors --- .../src/components/organisms/Avatar.scss | 9 ++- .../src/components/organisms/Carousel.scss | 9 ++- .../src/components/organisms/Footer.scss | 9 ++- .../src/components/organisms/NavTiles.scss | 11 +-- .../src/components/organisms/Navbar.scss | 7 +- .../components/organisms/RediHeroLanding.scss | 27 +++---- .../src/components/organisms/SideMenu.scss | 15 ++-- .../organisms/modules/MSessions.scss | 7 +- .../pages/app/find-a-mentor/FindAMentor.scss | 3 +- .../src/pages/front/signup/SignUpLanding.scss | 5 +- apps/redi-connect/src/styles/_global.scss | 5 +- apps/redi-connect/src/styles/main.scss | 17 +++-- .../components/molecules/AccordionForm.scss | 3 +- .../src/components/molecules/Editable.scss | 4 +- .../src/components/organisms/Avatar.scss | 9 ++- .../src/components/organisms/Footer.scss | 9 ++- .../src/components/organisms/NavTiles.scss | 11 +-- .../src/components/organisms/Navbar.scss | 7 +- .../src/components/organisms/SideMenu.scss | 11 +-- .../src/pages/app/browse/Browse.scss | 4 +- .../src/pages/front/signup/SignUpLanding.scss | 5 +- .../.storybook/main.ts | 3 +- .../src/lib/atoms/Button.scss | 21 +++--- .../src/lib/atoms/Checkbox/Checkbox.scss | 3 +- .../src/lib/atoms/Checkbox/Checkbox.spec.ts | 2 +- .../src/lib/atoms/FormDatePicker.scss | 7 +- .../src/lib/atoms/FormDraggableAccordion.scss | 3 +- .../src/lib/atoms/Heading.scss | 3 +- .../src/lib/molecules/Editable.scss | 5 +- .../src/lib/molecules/FaqItem.scss | 3 +- .../src/lib/molecules/Modal.scss | 7 +- .../src/lib/molecules/Module.scss | 3 +- .../src/lib/styles/_colors.scss | 21 ++++++ .../src/lib/styles/_colors.stories.mdx | 5 ++ .../src/lib/styles/_fonts.stories.mdx | 5 ++ .../src/lib/styles/_forms.scss | 4 +- .../src/lib/styles/_global.scss | 8 +- .../src/lib/styles/_main.scss | 20 ++--- .../src/lib/styles/_variables.scss | 75 ++++++++----------- .../src/lib/styles/_variables.stories.mdx | 5 ++ 40 files changed, 226 insertions(+), 164 deletions(-) create mode 100644 libs/shared-atomic-design-components/src/lib/styles/_colors.scss create mode 100644 libs/shared-atomic-design-components/src/lib/styles/_colors.stories.mdx create mode 100644 libs/shared-atomic-design-components/src/lib/styles/_fonts.stories.mdx create mode 100644 libs/shared-atomic-design-components/src/lib/styles/_variables.stories.mdx diff --git a/apps/redi-connect/src/components/organisms/Avatar.scss b/apps/redi-connect/src/components/organisms/Avatar.scss index 06ffe2ca5..b74362cb9 100644 --- a/apps/redi-connect/src/components/organisms/Avatar.scss +++ b/apps/redi-connect/src/components/organisms/Avatar.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -23,7 +24,7 @@ } &--editable { - border: 4px solid $redi-orange-dark; + border: 4px solid colors.$redi-orange-dark; box-shadow: 2px 0 15px 0 rgba(255, 92, 31, 0.34); padding-top: calc(100% - 8px); @@ -62,7 +63,7 @@ &--placeholder:before { border: 1px solid #a0a0a0; - background-color: $grey-extra-light; + background-color: colors.$grey-extra-light; } &__image { @@ -86,8 +87,8 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - border: 1px solid $grey-light; - color: $grey-light; + border: 1px solid colors.$grey-light; + color: colors.$grey-light; border-radius: $radius; } diff --git a/apps/redi-connect/src/components/organisms/Carousel.scss b/apps/redi-connect/src/components/organisms/Carousel.scss index 27cf7e114..a0a8ea373 100644 --- a/apps/redi-connect/src/components/organisms/Carousel.scss +++ b/apps/redi-connect/src/components/organisms/Carousel.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -10,7 +11,7 @@ .slick-dots li { width: 0.75rem; height: 0.75rem; - background: $grey-light; + background: colors.$grey-light; border-radius: 50%; & button:before { @@ -18,7 +19,7 @@ } &.slick-active { - background: $red; + background: colors.$red; } } @@ -38,11 +39,11 @@ } &--border-orange { - border-image: linear-gradient(to right, $redi-orange 30%, white 30%) 10%; + border-image: linear-gradient(to right, colors.$redi-orange 30%, white 30%) 10%; } &--border-blue { - border-image: linear-gradient(to right, $redi-blue 30%, white 30%) 10%; + border-image: linear-gradient(to right, colors.$redi-blue 30%, white 30%) 10%; } } } diff --git a/apps/redi-connect/src/components/organisms/Footer.scss b/apps/redi-connect/src/components/organisms/Footer.scss index 7e00bb8c5..d3a1368e2 100644 --- a/apps/redi-connect/src/components/organisms/Footer.scss +++ b/apps/redi-connect/src/components/organisms/Footer.scss @@ -1,9 +1,10 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; .footer { - background: $white; - border-top: 1px solid $grey-light; + background: colors.$white; + border-top: 1px solid colors.$grey-light; &__logo { display: block; @@ -15,7 +16,7 @@ &__copyright { padding-top: 1.5rem; - border-top: 1px solid $grey-light; + border-top: 1px solid colors.$grey-light; } &__link { @@ -42,7 +43,7 @@ left: 0; bottom: 0; width: 1.5rem; - border-bottom: 2px solid $redi-orange-dark; + border-bottom: 2px solid colors.$redi-orange-dark; } } } diff --git a/apps/redi-connect/src/components/organisms/NavTiles.scss b/apps/redi-connect/src/components/organisms/NavTiles.scss index ed2fc54f3..35d983ffc 100644 --- a/apps/redi-connect/src/components/organisms/NavTiles.scss +++ b/apps/redi-connect/src/components/organisms/NavTiles.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -40,22 +41,22 @@ padding-left: 0; &--mentor { - color: $redi-blue-dark; + color: colors.$redi-blue-dark; &:hover { - color: $redi-blue-dark; + color: colors.$redi-blue-dark; } .icon path { - fill: $redi-blue-dark; + fill: colors.$redi-blue-dark; } } &--mentee { - color: $redi-orange-dark; + color: colors.$redi-orange-dark; .icon path { - fill: $redi-orange-dark; + fill: colors.$redi-orange-dark; } } } diff --git a/apps/redi-connect/src/components/organisms/Navbar.scss b/apps/redi-connect/src/components/organisms/Navbar.scss index b0f166be9..a27cf12dc 100644 --- a/apps/redi-connect/src/components/organisms/Navbar.scss +++ b/apps/redi-connect/src/components/organisms/Navbar.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -40,14 +41,14 @@ height: 100%; z-index: 10; padding: 8rem 1.25rem; - background-color: $white; + background-color: colors.$white; background-image: url('libs/shared-atomic-design-components/src/assets/images/bubbles.svg'); background-repeat: no-repeat; background-size: 80%; background-position: 50% 50%; & hr { - border: 1px solid $grey; + border: 1px solid colors.$grey; } } @@ -58,6 +59,6 @@ right: 1.75rem; font-size: 1.5rem; line-height: 1.5rem; - color: $redi-orange-dark; + color: colors.$redi-orange-dark; } } diff --git a/apps/redi-connect/src/components/organisms/RediHeroLanding.scss b/apps/redi-connect/src/components/organisms/RediHeroLanding.scss index 1c02e22e5..f47ac90c7 100644 --- a/apps/redi-connect/src/components/organisms/RediHeroLanding.scss +++ b/apps/redi-connect/src/components/organisms/RediHeroLanding.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -5,50 +6,50 @@ &--mentee { background-image: linear-gradient( to bottom, - $redi-orange-light 80%, - $white 80% + colors.$redi-orange-light 80%, + colors.$white 80% ); @include mobile() { background-image: linear-gradient( to bottom, - $redi-orange-light 95%, - $white 95% + colors.$redi-orange-light 95%, + colors.$white 95% ); } g { - fill: $redi-orange-dark; + fill: colors.$redi-orange-dark; } .column, hr { - border-color: $redi-orange-dark; + border-color: colors.$redi-orange-dark; } } &--mentor { background-image: linear-gradient( to bottom, - $redi-blue-light 80%, - $white 80% + colors.colors.$redi-blue-light 80%, + colors.$white 80% ); @include mobile() { background-image: linear-gradient( to bottom, - $redi-blue-light 95%, - $white 95% + colors.colors.$redi-blue-light 95%, + colors.$white 95% ); } g { - fill: $redi-blue-dark; + fill: colors.$redi-blue-dark; } .column, hr { - border-color: $redi-blue-dark; + border-color: colors.$redi-blue-dark; } } @@ -80,7 +81,7 @@ } &__columns { - background: $white; + background: colors.$white; padding: 2rem; border-radius: 0.25rem; margin: 4rem 0; diff --git a/apps/redi-connect/src/components/organisms/SideMenu.scss b/apps/redi-connect/src/components/organisms/SideMenu.scss index 24d27fb0e..f616b7fdd 100644 --- a/apps/redi-connect/src/components/organisms/SideMenu.scss +++ b/apps/redi-connect/src/components/organisms/SideMenu.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -7,9 +8,9 @@ bottom: 0; right: 0; width: 100%; - background-color: $white; + background-color: colors.$white; z-index: 10; - border-top: 1px solid $grey-extra-light; + border-top: 1px solid colors.$grey-extra-light; box-shadow: 0 -1px 9px 0 rgba(179, 179, 179, 0.36); } } @@ -30,7 +31,7 @@ &__link { font-size: $size-6; font-weight: $weight-normal; - color: $grey-dark; + color: colors.$grey-dark; display: block; @include touch() { @@ -51,20 +52,20 @@ &--active { font-weight: $weight-bold; color: $black; - border-right: 5px solid $redi-blue; + border-right: 5px solid colors.$redi-blue; @include touch() { font-weight: $weight-normal; - color: $red; + color: colors.$red; border-right: none; &:hover { - color: $red; + color: colors.$red; } } & g { - fill: $red; + fill: colors.$red; } } diff --git a/apps/redi-connect/src/components/organisms/modules/MSessions.scss b/apps/redi-connect/src/components/organisms/modules/MSessions.scss index b819567ae..b2cfe61bb 100644 --- a/apps/redi-connect/src/components/organisms/modules/MSessions.scss +++ b/apps/redi-connect/src/components/organisms/modules/MSessions.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -17,9 +18,9 @@ display: inline-block; counter-increment: session; content: counter(session); - color: $white; + color: colors.$white; border-radius: 50%; - background-color: $redi-orange-dark; + background-color: colors.$redi-orange-dark; margin-right: 1.5rem; } } @@ -33,7 +34,7 @@ border-radius: 50%; &:hover { - background-color: $redi-orange-extra-light; + background-color: colors.$redi-orange-extra-light; } } } diff --git a/apps/redi-connect/src/pages/app/find-a-mentor/FindAMentor.scss b/apps/redi-connect/src/pages/app/find-a-mentor/FindAMentor.scss index f85576400..70485d9a1 100644 --- a/apps/redi-connect/src/pages/app/find-a-mentor/FindAMentor.scss +++ b/apps/redi-connect/src/pages/app/find-a-mentor/FindAMentor.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -97,7 +98,7 @@ &__icon { font-size: 1.2rem; path { - fill: $redi-orange-dark; + fill: colors.$redi-orange-dark; } } diff --git a/apps/redi-connect/src/pages/front/signup/SignUpLanding.scss b/apps/redi-connect/src/pages/front/signup/SignUpLanding.scss index 1f1c89784..0aee7d788 100644 --- a/apps/redi-connect/src/pages/front/signup/SignUpLanding.scss +++ b/apps/redi-connect/src/pages/front/signup/SignUpLanding.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -39,9 +40,9 @@ } .border-mentor { - border-color: $redi-blue-dark; + border-color: colors.$redi-blue-dark; } .border-mentee { - border-color: $redi-orange-dark; + border-color: colors.$redi-orange-dark; } diff --git a/apps/redi-connect/src/styles/_global.scss b/apps/redi-connect/src/styles/_global.scss index 8e1cdbc18..5c87752cd 100644 --- a/apps/redi-connect/src/styles/_global.scss +++ b/apps/redi-connect/src/styles/_global.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import './_variables.scss'; @@ -6,13 +7,13 @@ @include mobile() { padding-bottom: 1.5rem; margin-bottom: -0.5rem; - border-bottom: 1px solid $grey-light; + border-bottom: 1px solid colors.$grey-light; } } &:not(:last-child) { padding-bottom: 1.5rem; margin-bottom: 1.5rem; - border-bottom: 1px solid $grey-light; + border-bottom: 1px solid colors.$grey-light; } } diff --git a/apps/redi-connect/src/styles/main.scss b/apps/redi-connect/src/styles/main.scss index 2cff598d8..94046820c 100644 --- a/apps/redi-connect/src/styles/main.scss +++ b/apps/redi-connect/src/styles/main.scss @@ -1,4 +1,5 @@ // custom variable overwrites for bulma +@use '_colors' as colors; @import '_variables.scss'; @import '_global.scss'; @@ -32,7 +33,7 @@ code { } %arrow { - border: 2px solid $redi-orange-dark; + border: 2px solid colors.$redi-orange-dark; border-right: 0; border-top: 0; content: ' '; @@ -52,7 +53,7 @@ textarea, select { &::placeholder { font-style: italic; - color: $grey !important; + color: colors.$grey !important; } } @@ -78,7 +79,7 @@ a:hover { } &--separator { - border-top: 1px solid $grey-light; + border-top: 1px solid colors.$grey-light; } &.section--bottom-large-spaceing { @@ -110,18 +111,18 @@ a:hover { // TODO: should be transfered to a layout template // will be done the next time this view is reused .section.color-half-desktop { - background-color: $white; + background-color: colors.$white; @include tablet() { - background: linear-gradient(90deg, $redi-blue-light 50%, $white 50%); + background: linear-gradient(90deg, colors.$redi-blue-light 50%, colors.$white 50%); } } .section.color-half-tablet { - background-color: $white; + background-color: colors.$white; @include desktop() { - background: linear-gradient(90deg, $redi-blue-light 50%, $white 50%); + background: linear-gradient(90deg, colors.$redi-blue-light 50%, colors.$white 50%); } } @@ -137,7 +138,7 @@ a:hover { @include desktop() { margin: -3.25rem auto; padding: 3.25rem 0; - background: linear-gradient(90deg, $redi-blue-light 15.8%, $white 15.8%); + background: linear-gradient(90deg, colors.$redi-blue-light 15.8%, colors.$white 15.8%); } } diff --git a/apps/redi-talent-pool/src/components/molecules/AccordionForm.scss b/apps/redi-talent-pool/src/components/molecules/AccordionForm.scss index a158a6031..9bdb64a02 100644 --- a/apps/redi-talent-pool/src/components/molecules/AccordionForm.scss +++ b/apps/redi-talent-pool/src/components/molecules/AccordionForm.scss @@ -1,9 +1,10 @@ +@use '_colors' as colors; @import '_variables.scss'; .accordion-form { padding-top: 1rem; // margin-bottom: 0.75rem; - border-bottom: 1px solid $grey-light; + border-bottom: 1px solid colors.$grey-light; &-block__title { font-weight: $weight-bold; diff --git a/apps/redi-talent-pool/src/components/molecules/Editable.scss b/apps/redi-talent-pool/src/components/molecules/Editable.scss index 94f869a31..8d2bae255 100644 --- a/apps/redi-talent-pool/src/components/molecules/Editable.scss +++ b/apps/redi-talent-pool/src/components/molecules/Editable.scss @@ -1,9 +1,9 @@ -@import '_variables.scss'; +@use '_colors' as colors; .profile-section { &--title { padding-bottom: 0.5rem; - border-bottom: 1px solid $grey-light; + border-bottom: 1px solid colors.$grey-light; margin-bottom: 1rem; } diff --git a/apps/redi-talent-pool/src/components/organisms/Avatar.scss b/apps/redi-talent-pool/src/components/organisms/Avatar.scss index 06ffe2ca5..b74362cb9 100644 --- a/apps/redi-talent-pool/src/components/organisms/Avatar.scss +++ b/apps/redi-talent-pool/src/components/organisms/Avatar.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -23,7 +24,7 @@ } &--editable { - border: 4px solid $redi-orange-dark; + border: 4px solid colors.$redi-orange-dark; box-shadow: 2px 0 15px 0 rgba(255, 92, 31, 0.34); padding-top: calc(100% - 8px); @@ -62,7 +63,7 @@ &--placeholder:before { border: 1px solid #a0a0a0; - background-color: $grey-extra-light; + background-color: colors.$grey-extra-light; } &__image { @@ -86,8 +87,8 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - border: 1px solid $grey-light; - color: $grey-light; + border: 1px solid colors.$grey-light; + color: colors.$grey-light; border-radius: $radius; } diff --git a/apps/redi-talent-pool/src/components/organisms/Footer.scss b/apps/redi-talent-pool/src/components/organisms/Footer.scss index 7e00bb8c5..d3a1368e2 100644 --- a/apps/redi-talent-pool/src/components/organisms/Footer.scss +++ b/apps/redi-talent-pool/src/components/organisms/Footer.scss @@ -1,9 +1,10 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; .footer { - background: $white; - border-top: 1px solid $grey-light; + background: colors.$white; + border-top: 1px solid colors.$grey-light; &__logo { display: block; @@ -15,7 +16,7 @@ &__copyright { padding-top: 1.5rem; - border-top: 1px solid $grey-light; + border-top: 1px solid colors.$grey-light; } &__link { @@ -42,7 +43,7 @@ left: 0; bottom: 0; width: 1.5rem; - border-bottom: 2px solid $redi-orange-dark; + border-bottom: 2px solid colors.$redi-orange-dark; } } } diff --git a/apps/redi-talent-pool/src/components/organisms/NavTiles.scss b/apps/redi-talent-pool/src/components/organisms/NavTiles.scss index ed2fc54f3..35d983ffc 100644 --- a/apps/redi-talent-pool/src/components/organisms/NavTiles.scss +++ b/apps/redi-talent-pool/src/components/organisms/NavTiles.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -40,22 +41,22 @@ padding-left: 0; &--mentor { - color: $redi-blue-dark; + color: colors.$redi-blue-dark; &:hover { - color: $redi-blue-dark; + color: colors.$redi-blue-dark; } .icon path { - fill: $redi-blue-dark; + fill: colors.$redi-blue-dark; } } &--mentee { - color: $redi-orange-dark; + color: colors.$redi-orange-dark; .icon path { - fill: $redi-orange-dark; + fill: colors.$redi-orange-dark; } } } diff --git a/apps/redi-talent-pool/src/components/organisms/Navbar.scss b/apps/redi-talent-pool/src/components/organisms/Navbar.scss index 80b5a92c6..bacf619bc 100644 --- a/apps/redi-talent-pool/src/components/organisms/Navbar.scss +++ b/apps/redi-talent-pool/src/components/organisms/Navbar.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -47,7 +48,7 @@ height: 100%; z-index: 10; padding: 8rem 1.25rem; - background-color: $white; + background-color: colors.$white; // TODO: can we use relative import here instead? background-image: url('libs/shared-atomic-design-components/src/assets/images/bubbles.svg'); background-repeat: no-repeat; @@ -55,7 +56,7 @@ background-position: 50% 50%; & hr { - border: 1px solid $grey; + border: 1px solid colors.$grey; } } @@ -66,6 +67,6 @@ right: 1.75rem; font-size: 1.5rem; line-height: 1.5rem; - color: $redi-orange-dark; + color: colors.$redi-orange-dark; } } diff --git a/apps/redi-talent-pool/src/components/organisms/SideMenu.scss b/apps/redi-talent-pool/src/components/organisms/SideMenu.scss index 24d27fb0e..254dbb7b8 100644 --- a/apps/redi-talent-pool/src/components/organisms/SideMenu.scss +++ b/apps/redi-talent-pool/src/components/organisms/SideMenu.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -7,9 +8,9 @@ bottom: 0; right: 0; width: 100%; - background-color: $white; + background-color: colors.$white; z-index: 10; - border-top: 1px solid $grey-extra-light; + border-top: 1px solid colors.$grey-extra-light; box-shadow: 0 -1px 9px 0 rgba(179, 179, 179, 0.36); } } @@ -30,7 +31,7 @@ &__link { font-size: $size-6; font-weight: $weight-normal; - color: $grey-dark; + color: colors.$grey-dark; display: block; @include touch() { @@ -51,7 +52,7 @@ &--active { font-weight: $weight-bold; color: $black; - border-right: 5px solid $redi-blue; + border-right: 5px solid colors.$redi-blue; @include touch() { font-weight: $weight-normal; @@ -64,7 +65,7 @@ } & g { - fill: $red; + fill: colors.$red; } } diff --git a/apps/redi-talent-pool/src/pages/app/browse/Browse.scss b/apps/redi-talent-pool/src/pages/app/browse/Browse.scss index 8e8561386..b368dfb2d 100644 --- a/apps/redi-talent-pool/src/pages/app/browse/Browse.scss +++ b/apps/redi-talent-pool/src/pages/app/browse/Browse.scss @@ -1,5 +1,5 @@ +@use '_colors' as colors; // Copied directly from 'FindAMentor.scss' - @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -99,7 +99,7 @@ &__icon { font-size: 1.2rem; path { - fill: $redi-orange-dark; + fill: colors.$redi-orange-dark; } } diff --git a/apps/redi-talent-pool/src/pages/front/signup/SignUpLanding.scss b/apps/redi-talent-pool/src/pages/front/signup/SignUpLanding.scss index 1f1c89784..0aee7d788 100644 --- a/apps/redi-talent-pool/src/pages/front/signup/SignUpLanding.scss +++ b/apps/redi-talent-pool/src/pages/front/signup/SignUpLanding.scss @@ -1,3 +1,4 @@ +@use '_colors' as colors; @import '~bulma/sass/utilities/_all'; @import '_variables.scss'; @@ -39,9 +40,9 @@ } .border-mentor { - border-color: $redi-blue-dark; + border-color: colors.$redi-blue-dark; } .border-mentee { - border-color: $redi-orange-dark; + border-color: colors.$redi-orange-dark; } diff --git a/libs/shared-atomic-design-components/.storybook/main.ts b/libs/shared-atomic-design-components/.storybook/main.ts index d1624f3b6..b4f263a38 100644 --- a/libs/shared-atomic-design-components/.storybook/main.ts +++ b/libs/shared-atomic-design-components/.storybook/main.ts @@ -3,7 +3,8 @@ const rootMain = require('../../../.storybook/main') // Use the following syntax to add addons! // rootMain.addons.push(''); rootMain.stories.push( - ...['../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'] + '../src/lib/**/*.stories.mdx', + '../src/lib/**/*.stories.@(js|jsx|ts|tsx)' ) module.exports = rootMain diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Button.scss b/libs/shared-atomic-design-components/src/lib/atoms/Button.scss index 48c6f39ae..42107737d 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Button.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Button.scss @@ -1,3 +1,4 @@ +@use '../styles/colors' as colors; @import '~bulma/sass/utilities/_all'; @import '../styles/_variables.scss'; @@ -15,7 +16,7 @@ position: relative; cursor: pointer; transition: $transition; - border: 2px solid $black; + border: 2px solid colors.$black; transform-style: preserve-3d; + .button-atom { @@ -43,7 +44,7 @@ height: 2rem; width: 1px; - border-left: 1px solid $grey !important; + border-left: 1px solid colors.$grey !important; } } @@ -61,11 +62,11 @@ left: 0.375rem; width: calc(100% + 4px); height: calc(100% + 4px); - background-color: $redi-orange-light; + background-color: colors.$redi-orange-light; } &:hover::after { - background-color: $redi-orange; + background-color: colors.$redi-orange; } &:active { @@ -81,7 +82,7 @@ color: $grey-dark; &:after { - background-color: $grey-light; + background-color: colors.$grey-light; } } } @@ -91,7 +92,7 @@ padding: 0 1rem; &:hover { - color: $redi-orange-dark; + color: colors.$redi-orange-dark; } } @@ -102,12 +103,12 @@ &:hover { text-decoration: none; - color: $redi-orange-dark; + color: colors.$redi-orange-dark; } } &--active { - color: $redi-orange-dark; + color: colors.$redi-orange-dark; } &--small { @@ -135,12 +136,12 @@ .icon { path { - fill: $black; + fill: colors.$black; transition: $transition; } } &:hover path { - fill: $redi-orange-dark; + fill: colors.$redi-orange-dark; } } diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss index d41ab0ea1..a402a68e5 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.scss @@ -1,3 +1,4 @@ +@use '../../styles/colors' as colors; @import '../../styles/_variables.scss'; $radius: 4px; @@ -48,7 +49,7 @@ $radius: 4px; height: 1rem; top: 0.125rem; left: 0.5rem; - border: solid $white; + border: solid colors.$white; border-width: 0 2px 2px 0; transform: rotate(40deg); } diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.spec.ts b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.spec.ts index 0c889cea9..3735862c9 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.spec.ts +++ b/libs/shared-atomic-design-components/src/lib/atoms/Checkbox/Checkbox.spec.ts @@ -1,4 +1,4 @@ -import {Checkbox} from '.'; +import { Checkbox } from '.'; describe(Checkbox.name, () => { it('passes', () => { diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.scss b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.scss index dca4b1205..27f3b5051 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.scss @@ -1,3 +1,4 @@ +@use '../styles/colors' as colors; @import '../styles/_variables.scss'; @import 'node_modules/react-datepicker/src/stylesheets/datepicker.scss'; @@ -11,7 +12,7 @@ right: 0.5rem; path { - fill: $redi-orange-dark; + fill: colors.$redi-orange-dark; } } } @@ -27,8 +28,8 @@ } .react-datepicker__close-icon::after { - background-color: $redi-orange-extra-light; - color: $redi-orange-dark; + background-color: colors.$redi-orange-extra-light; + color: colors.$redi-orange-dark; height: 26px; width: 26px; font-size: 18px; diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.scss b/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.scss index 1eff40689..aa5274b29 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.scss @@ -1,9 +1,10 @@ +@use '../styles/colors' as colors; @import '../styles/_variables.scss'; .form-draggable-accordion { padding-top: 1rem; // margin-bottom: 0.75rem; - border-bottom: 1px solid $grey-light; + border-bottom: 1px solid colors.$grey-light; &-block__title { font-weight: $weight-bold; diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Heading.scss b/libs/shared-atomic-design-components/src/lib/atoms/Heading.scss index 9e9bf18b7..59b6d74eb 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Heading.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Heading.scss @@ -1,3 +1,4 @@ +@use '../styles/colors' as colors; @import '~bulma/sass/utilities/_all'; @import '../styles/_variables.scss'; @@ -17,7 +18,7 @@ &::after, &::before { width: 3.25rem; - border: 2px solid $redi-orange-dark; + border: 2px solid colors.$redi-orange-dark; position: absolute; border-radius: 2px; } diff --git a/libs/shared-atomic-design-components/src/lib/molecules/Editable.scss b/libs/shared-atomic-design-components/src/lib/molecules/Editable.scss index f3e8f6107..ed1841ea9 100644 --- a/libs/shared-atomic-design-components/src/lib/molecules/Editable.scss +++ b/libs/shared-atomic-design-components/src/lib/molecules/Editable.scss @@ -1,3 +1,4 @@ +@use '../styles/colors' as colors; @import '../styles/_variables.scss'; .editable { @@ -22,7 +23,7 @@ transition: $transition; &:not(.icon__button--disabled):hover { - background-color: $redi-orange-extra-light; + background-color: colors.$redi-orange-extra-light; } path { @@ -30,6 +31,6 @@ } &--disabled path { - fill: $grey-light; + fill: colors.$grey-light; } } diff --git a/libs/shared-atomic-design-components/src/lib/molecules/FaqItem.scss b/libs/shared-atomic-design-components/src/lib/molecules/FaqItem.scss index 661294a7c..28e22b091 100644 --- a/libs/shared-atomic-design-components/src/lib/molecules/FaqItem.scss +++ b/libs/shared-atomic-design-components/src/lib/molecules/FaqItem.scss @@ -1,9 +1,10 @@ +@use '_colors' as colors; @import '_variables.scss'; .faq { padding-top: 1rem; margin-bottom: 0.75rem; - border-bottom: 1px solid $grey-light; + border-bottom: 1px solid colors.$grey-light; &-block__title { font-weight: $weight-bold; diff --git a/libs/shared-atomic-design-components/src/lib/molecules/Modal.scss b/libs/shared-atomic-design-components/src/lib/molecules/Modal.scss index 9786bf09e..80fb7af3f 100644 --- a/libs/shared-atomic-design-components/src/lib/molecules/Modal.scss +++ b/libs/shared-atomic-design-components/src/lib/molecules/Modal.scss @@ -1,3 +1,4 @@ +@use '../styles/colors' as colors; @import '../styles/_variables.scss'; .modal { @@ -11,18 +12,18 @@ position: absolute; &:hover { - background-color: $white !important; + background-color: colors.$white !important; } &::before { width: 80%; height: 1px; - background-color: $black; + background-color: colors.$black; } &::after { height: 80%; width: 1px; - background-color: $black; + background-color: colors.$black; } } diff --git a/libs/shared-atomic-design-components/src/lib/molecules/Module.scss b/libs/shared-atomic-design-components/src/lib/molecules/Module.scss index e32f5f985..f1a58c90c 100644 --- a/libs/shared-atomic-design-components/src/lib/molecules/Module.scss +++ b/libs/shared-atomic-design-components/src/lib/molecules/Module.scss @@ -1,3 +1,4 @@ +@use '../styles/colors' as colors; @import '../styles/_variables.scss'; .module { @@ -9,7 +10,7 @@ display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid $grey-light; + border-bottom: 1px solid colors.$grey-light; margin-bottom: 1rem; &__buttons { diff --git a/libs/shared-atomic-design-components/src/lib/styles/_colors.scss b/libs/shared-atomic-design-components/src/lib/styles/_colors.scss new file mode 100644 index 000000000..da1a6f91f --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/styles/_colors.scss @@ -0,0 +1,21 @@ +// bulma colors +$black: #000; +$white: #fff; +$grey-dark: #5d5d5d; +$grey: #a0a0a0; +$grey-light: #dadada; +$grey-extra-light: #f0f0f0; + +$red: #ea3f25; +$green: #1cc666; +// redi colors +$redi-blue-dark: #2cb0c7; +$redi-blue: #84c5d2; +$redi-blue-light: #daf0f4; + +$redi-orange-dark: #fd4d00; +$redi-orange: #ff7d55; +$redi-orange-light: #ffb298; +$redi-orange-extra-light: #ffeae2; + +$shadow: #6f7980; diff --git a/libs/shared-atomic-design-components/src/lib/styles/_colors.stories.mdx b/libs/shared-atomic-design-components/src/lib/styles/_colors.stories.mdx new file mode 100644 index 000000000..a08fe1f69 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/styles/_colors.stories.mdx @@ -0,0 +1,5 @@ + + +# Colors + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/styles/_fonts.stories.mdx b/libs/shared-atomic-design-components/src/lib/styles/_fonts.stories.mdx new file mode 100644 index 000000000..c22790b10 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/styles/_fonts.stories.mdx @@ -0,0 +1,5 @@ + + +# Fonts + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/styles/_forms.scss b/libs/shared-atomic-design-components/src/lib/styles/_forms.scss index eeec400e8..1a23a0e79 100644 --- a/libs/shared-atomic-design-components/src/lib/styles/_forms.scss +++ b/libs/shared-atomic-design-components/src/lib/styles/_forms.scss @@ -1,4 +1,6 @@ +@use '_colors' as colors; @import './_variables'; + .submit { &-link { font-size: $size-7; @@ -43,7 +45,7 @@ top: 50%; margin-top: -0.6rem; right: 1rem; - border: solid $green; + border: solid colors.$green; border-width: 0 2px 2px 0; transform: rotate(45deg); } diff --git a/libs/shared-atomic-design-components/src/lib/styles/_global.scss b/libs/shared-atomic-design-components/src/lib/styles/_global.scss index 8e1cdbc18..ede1befcb 100644 --- a/libs/shared-atomic-design-components/src/lib/styles/_global.scss +++ b/libs/shared-atomic-design-components/src/lib/styles/_global.scss @@ -1,18 +1,20 @@ +@use '_colors' as colors; + @import '~bulma/sass/utilities/_all'; -@import './_variables.scss'; +@import '_variables.scss'; .block-separator { .block-separator { @include mobile() { padding-bottom: 1.5rem; margin-bottom: -0.5rem; - border-bottom: 1px solid $grey-light; + border-bottom: 1px solid colors.$grey-light; } } &:not(:last-child) { padding-bottom: 1.5rem; margin-bottom: 1.5rem; - border-bottom: 1px solid $grey-light; + border-bottom: 1px solid colors.$grey-light; } } diff --git a/libs/shared-atomic-design-components/src/lib/styles/_main.scss b/libs/shared-atomic-design-components/src/lib/styles/_main.scss index 2d99a22bc..dbac572eb 100644 --- a/libs/shared-atomic-design-components/src/lib/styles/_main.scss +++ b/libs/shared-atomic-design-components/src/lib/styles/_main.scss @@ -1,3 +1,5 @@ +@use '_colors' as colors; + // custom variable overwrites for bulma @import '_variables.scss'; @@ -32,7 +34,7 @@ code { } %arrow { - border: 2px solid $redi-orange-dark; + border: 2px solid colors.$redi-orange-dark; border-right: 0; border-top: 0; content: ' '; @@ -52,7 +54,7 @@ textarea, select { &::placeholder { font-style: italic; - color: $grey !important; + color: colors.$grey !important; } } @@ -65,7 +67,7 @@ a:hover { } .color-secondary { - color: $redi-blue-dark; + color: colors.$redi-blue-dark; } .field:not(:last-child) { @@ -82,7 +84,7 @@ a:hover { } &--separator { - border-top: 1px solid $grey-light; + border-top: 1px solid colors.$grey-light; } &.section--bottom-large-spaceing { @@ -114,18 +116,18 @@ a:hover { // TODO: should be transfered to a layout template // will be done the next time this view is reused .section.color-half-desktop { - background-color: $white; + background-color: colors.$white; @include tablet() { - background: linear-gradient(90deg, $redi-blue-light 50%, $white 50%); + background: linear-gradient(90deg, colors.$redi-blue-light 50%, colors.$white 50%); } } .section.color-half-tablet { - background-color: $white; + background-color: colors.$white; @include desktop() { - background: linear-gradient(90deg, $redi-blue-light 50%, $white 50%); + background: linear-gradient(90deg, colors.$redi-blue-light 50%, colors.$white 50%); } } @@ -141,7 +143,7 @@ a:hover { @include desktop() { margin: -3.25rem auto; padding: 3.25rem 0; - background: linear-gradient(90deg, $redi-blue-light 15.8%, $white 15.8%); + background: linear-gradient(90deg, colors.$redi-blue-light 15.8%, colors.$white 15.8%); } } diff --git a/libs/shared-atomic-design-components/src/lib/styles/_variables.scss b/libs/shared-atomic-design-components/src/lib/styles/_variables.scss index 817081081..5523de4b2 100644 --- a/libs/shared-atomic-design-components/src/lib/styles/_variables.scss +++ b/libs/shared-atomic-design-components/src/lib/styles/_variables.scss @@ -1,38 +1,29 @@ -// bulma colors -$black: #000; -$white: #fff; -$grey-dark: #5d5d5d; -$grey: #a0a0a0; -$grey-light: #dadada; -$grey-extra-light: #f0f0f0; - -$red: #ea3f25; -$green: #1cc666; -// redi colors -$redi-blue-dark: #2cb0c7; -$redi-blue: #84c5d2; -$redi-blue-light: #daf0f4; - -$redi-orange-dark: #fd4d00; -$redi-orange: #ff7d55; -$redi-orange-light: #ffb298; -$redi-orange-extra-light: #ffeae2; - -$primary: $redi-orange-dark; -$warning: $redi-orange-dark; -$info: $redi-orange-extra-light; - -$body-color: $black; -$body-background-color: $white; - -$shadow: #6f7980; +@use '_colors' as colors; + +// Bulma colors override +$black: colors.$black; +$white: colors.$white; +$grey-dark: colors.$grey-dark; +$grey: colors.$grey; +$grey-light: colors.$grey-light; +$grey-extra-light: colors.$grey-extra-light; + +$red: colors.$red; +$green: colors.$green; + +$primary: colors.$redi-orange-dark; +$warning: colors.$redi-orange-dark; +$info: colors.$redi-orange-extra-light; + +$body-color: colors.$black; +$body-background-color: colors.$white; // fonts $family-primary: Avenir LT Std; $family-secondary: Jubilat; // shadows -$default-shadow: 0 0.375rem 1.5rem 0.1875rem rgba($shadow, 0.16); +$default-shadow: 0 0.375rem 1.5rem 0.1875rem rgba(colors.$shadow, 0.16); // bulma size $size-1: 4rem; // 64px @@ -67,31 +58,31 @@ $box-padding: 2rem; // $radius: 2px; $control-height: 3em; $input-shadow: inset 0 2px 6px rgba(178, 180, 181, 0.3); -$input-border-color: $grey; -$input-hover-border-color: $redi-orange; +$input-border-color: colors.$grey; +$input-hover-border-color: colors.$redi-orange; $input-focus-box-shadow-size: 0; -$input-focus: $grey-light; -$input-focus-color: $grey; -$label-color: $grey-dark; +$input-focus: colors.$grey-light; +$input-focus-color: colors.$grey; +$label-color: colors.$grey-dark; $label-weight: $weight-normal; $help-size: 0.875rem; -$checkbox-border: 1px $grey solid; +$checkbox-border: 1px colors.$grey solid; $button-disabled-opacity: 1; -$button-disabled-background-color: $grey-light; +$button-disabled-background-color: colors.$grey-light; $control-radius: 0; // texts $title-family: $family-secondary; $title-weight: $weight-normal; $title-line-height: 1; -$title-color: $black; -$subtitle-color: $black; +$title-color: colors.$black; +$subtitle-color: colors.$black; $subtitle-line-height: 1; -$link: $redi-orange-dark; +$link: colors.$redi-orange-dark; $radius-small: 0; -$tag-color: $redi-orange; -$tag-background-color: $redi-orange-extra-light; +$tag-color: colors.$redi-orange; +$tag-background-color: colors.$redi-orange-extra-light; $transition: ease-in-out all 0.2s; @@ -105,7 +96,7 @@ $card-shadow-hover: 0 6px 20px 3px rgba(111, 119, 121, 0.23); $modal-content-spacing-mobile: 100px; $modal-content-spacing-tablet: 100px; $modal-card-spacing: 100px; -$modal-card-head-background-color: $white; +$modal-card-head-background-color: colors.$white; $modal-card-head-padding: 24px; $modal-card-body-padding: 24px; $modal-card-body-foot: 24px; diff --git a/libs/shared-atomic-design-components/src/lib/styles/_variables.stories.mdx b/libs/shared-atomic-design-components/src/lib/styles/_variables.stories.mdx new file mode 100644 index 000000000..91519d83c --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/styles/_variables.stories.mdx @@ -0,0 +1,5 @@ + + +# Variables + +... \ No newline at end of file From c55a2922983b9ea1b42b9c956daec4361677dc30 Mon Sep 17 00:00:00 2001 From: Pablo Perez Date: Fri, 17 Dec 2021 11:38:45 +0100 Subject: [PATCH 08/37] [REFOLD] Atoms --- .../.storybook/manager.ts | 4 +- .../src/lib/atoms/{ => Button}/Button.scss | 5 +- .../src/lib/atoms/Button/Button.stories.mdx | 5 + .../lib/atoms/{ => Button}/Button.stories.tsx | 2 +- .../src/lib/atoms/{ => Button}/Button.tsx | 2 +- .../src/lib/atoms/Button/index.ts | 7 + .../src/lib/atoms/{ => Caption}/Caption.scss | 2 +- .../src/lib/atoms/Caption/Caption.stories.mdx | 5 + .../atoms/{ => Caption}/Caption.stories.tsx | 4 +- .../src/lib/atoms/{ => Caption}/Caption.tsx | 0 .../src/lib/atoms/Caption/index.ts | 7 + .../lib/atoms/{ => CardTags}/CardTags.scss | 0 .../lib/atoms/CardTags/CardTags.stories.mdx | 5 + .../atoms/{ => CardTags}/CardTags.stories.tsx | 6 +- .../src/lib/atoms/{ => CardTags}/CardTags.tsx | 0 .../src/lib/atoms/CardTags/index.ts | 7 + .../DecoratedHeadline.scss | 0 .../DecoratedHeadline.stories.mdx | 5 + .../DecoratedHeadline.stories.tsx | 6 +- .../DecoratedHeadline.tsx | 3 +- .../src/lib/atoms/DecoratedHeadline/index.ts | 7 + .../{ => FormDatePicker}/FormDatePicker.scss | 4 +- .../FormDatePicker/FormDatePicker.stories.mdx | 5 + .../FormDatePicker.stories.tsx | 6 +- .../{ => FormDatePicker}/FormDatePicker.tsx | 4 +- .../src/lib/atoms/FormDatePicker/index.ts | 7 + .../FormDraggableAccordion.scss | 4 +- .../FormDraggableAccordion.tsx | 4 +- .../lib/atoms/FormDraggableAccordion/index.ts | 7 + .../lib/atoms/FormInput/FormInput.stories.mdx | 5 + .../{ => FormInput}/FormInput.stories.tsx | 7 +- .../lib/atoms/{ => FormInput}/FormInput.tsx | 1 - .../src/lib/atoms/FormInput/index.ts | 7 + .../atoms/FormSelect/FormSelect.stories.mdx | 5 + .../{ => FormSelect}/FormSelect.stories.tsx | 10 +- .../lib/atoms/{ => FormSelect}/FormSelect.tsx | 3 +- .../src/lib/atoms/FormSelect/index.ts | 7 + .../{ => FormTextArea}/FormTextArea.scss | 2 +- .../FormTextArea/FormTextArea.stories.mdx | 5 + .../FormTextArea.stories.tsx | 4 +- .../atoms/{ => FormTextArea}/FormTextArea.tsx | 1 - .../src/lib/atoms/FormTextArea/index.ts | 7 + .../src/lib/atoms/{ => Heading}/Heading.scss | 4 +- .../src/lib/atoms/Heading/Heading.stories.mdx | 5 + .../atoms/{ => Heading}/Heading.stories.tsx | 2 +- .../src/lib/atoms/{ => Heading}/Heading.tsx | 0 .../src/lib/atoms/Heading/index.ts | 7 + .../src/lib/atoms/Icon.tsx | 128 ------------------ .../src/lib/atoms/{ => Icon}/Icon.scss | 2 +- .../src/lib/atoms/Icon/Icon.stories.mdx | 5 + .../src/lib/atoms/Icon/Icon.stories.tsx | 13 ++ .../src/lib/atoms/Icon/Icon.tsx | 100 ++++++++++++++ .../src/lib/atoms/Icon/index.ts | 7 + .../src/lib/atoms/Loader.stories.tsx | 15 -- .../src/lib/atoms/{ => Loader}/Loader.scss | 2 +- .../src/lib/atoms/Loader/Loader.stories.mdx | 5 + .../src/lib/atoms/Loader/Loader.stories.tsx | 15 ++ .../src/lib/atoms/{ => Loader}/Loader.tsx | 3 +- .../src/lib/atoms/Loader/index.ts | 7 + .../atoms/Placeholder/Placeholder.stories.mdx | 5 + .../{ => Placeholder}/Placeholder.stories.tsx | 2 +- .../atoms/{ => Placeholder}/Placeholder.tsx | 0 .../src/lib/atoms/Placeholder/index.ts | 7 + .../src/lib/atoms/SVGImage.stories.tsx | 16 --- .../src/lib/atoms/SVGImage.tsx | 44 ------ .../lib/atoms/SVGImage/SVGImage.stories.mdx | 5 + .../lib/atoms/SVGImage/SVGImage.stories.tsx | 16 +++ .../src/lib/atoms/SVGImage/SVGImage.tsx | 39 ++++++ .../src/lib/atoms/SVGImage/index.ts | 7 + .../src/lib/atoms/SearchField.stories.tsx | 20 --- .../atoms/SearchField/SearchField.stories.mdx | 5 + .../atoms/SearchField/SearchField.stories.tsx | 20 +++ .../atoms/{ => SearchField}/SearchField.tsx | 0 .../src/lib/atoms/SearchField/index.ts | 7 + .../SocialMediaIcons.scss} | 2 +- .../SocialMediaIcons.stories.mdx | 5 + .../SocialMediaIcons.stories.tsx | 2 +- .../SocialMediaIcons.tsx | 21 ++- .../src/lib/atoms/SocialMediaIcons/index.ts | 7 + .../src/lib/atoms/index.ts | 38 +++--- 80 files changed, 466 insertions(+), 309 deletions(-) rename libs/shared-atomic-design-components/src/lib/atoms/{ => Button}/Button.scss (96%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Button/Button.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => Button}/Button.stories.tsx (84%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => Button}/Button.tsx (98%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Button/index.ts rename libs/shared-atomic-design-components/src/lib/atoms/{ => Caption}/Caption.scss (64%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => Caption}/Caption.stories.tsx (75%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => Caption}/Caption.tsx (100%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Caption/index.ts rename libs/shared-atomic-design-components/src/lib/atoms/{ => CardTags}/CardTags.scss (100%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => CardTags}/CardTags.stories.tsx (70%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => CardTags}/CardTags.tsx (100%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/CardTags/index.ts rename libs/shared-atomic-design-components/src/lib/atoms/{ => DecoratedHeadline}/DecoratedHeadline.scss (100%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => DecoratedHeadline}/DecoratedHeadline.stories.tsx (68%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => DecoratedHeadline}/DecoratedHeadline.tsx (90%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/index.ts rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormDatePicker}/FormDatePicker.scss (88%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormDatePicker}/FormDatePicker.stories.tsx (85%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormDatePicker}/FormDatePicker.tsx (95%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/index.ts rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormDraggableAccordion}/FormDraggableAccordion.scss (88%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormDraggableAccordion}/FormDraggableAccordion.tsx (93%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion/index.ts create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/FormInput/FormInput.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormInput}/FormInput.stories.tsx (79%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormInput}/FormInput.tsx (98%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/FormInput/index.ts create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/FormSelect/FormSelect.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormSelect}/FormSelect.stories.tsx (73%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormSelect}/FormSelect.tsx (98%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/FormSelect/index.ts rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormTextArea}/FormTextArea.scss (71%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormTextArea}/FormTextArea.stories.tsx (85%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => FormTextArea}/FormTextArea.tsx (99%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/index.ts rename libs/shared-atomic-design-components/src/lib/atoms/{ => Heading}/Heading.scss (91%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => Heading}/Heading.stories.tsx (85%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => Heading}/Heading.tsx (100%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Heading/index.ts delete mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Icon.tsx rename libs/shared-atomic-design-components/src/lib/atoms/{ => Icon}/Icon.scss (90%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.stories.mdx create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.stories.tsx create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.tsx create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Icon/index.ts delete mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Loader.stories.tsx rename libs/shared-atomic-design-components/src/lib/atoms/{ => Loader}/Loader.scss (91%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.stories.mdx create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.stories.tsx rename libs/shared-atomic-design-components/src/lib/atoms/{ => Loader}/Loader.tsx (87%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Loader/index.ts create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Placeholder/Placeholder.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => Placeholder}/Placeholder.stories.tsx (83%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => Placeholder}/Placeholder.tsx (100%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/Placeholder/index.ts delete mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SVGImage.stories.tsx delete mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SVGImage.tsx create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.stories.mdx create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.stories.tsx create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.tsx create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SVGImage/index.ts delete mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SearchField.stories.tsx create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SearchField/SearchField.stories.mdx create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SearchField/SearchField.stories.tsx rename libs/shared-atomic-design-components/src/lib/atoms/{ => SearchField}/SearchField.tsx (100%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SearchField/index.ts rename libs/shared-atomic-design-components/src/lib/atoms/{MediaIcons.scss => SocialMediaIcons/SocialMediaIcons.scss} (90%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.stories.mdx rename libs/shared-atomic-design-components/src/lib/atoms/{ => SocialMediaIcons}/SocialMediaIcons.stories.tsx (82%) rename libs/shared-atomic-design-components/src/lib/atoms/{ => SocialMediaIcons}/SocialMediaIcons.tsx (86%) create mode 100644 libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/index.ts diff --git a/libs/shared-atomic-design-components/.storybook/manager.ts b/libs/shared-atomic-design-components/.storybook/manager.ts index 32f4a6925..1a86a2532 100644 --- a/libs/shared-atomic-design-components/.storybook/manager.ts +++ b/libs/shared-atomic-design-components/.storybook/manager.ts @@ -7,8 +7,8 @@ import ReDITheme from './theme'; addons.setConfig({ isFullscreen: false, showNav: true, - showPanel: 'right', - panelPosition: 'bottom', + showPanel: true, + panelPosition: 'right', enableShortcuts: true, isToolshown: true, theme: ReDITheme, diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Button.scss b/libs/shared-atomic-design-components/src/lib/atoms/Button/Button.scss similarity index 96% rename from libs/shared-atomic-design-components/src/lib/atoms/Button.scss rename to libs/shared-atomic-design-components/src/lib/atoms/Button/Button.scss index 42107737d..7b22bfafa 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Button.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Button/Button.scss @@ -1,6 +1,7 @@ -@use '../styles/colors' as colors; +@use '../../styles/colors' as colors; + @import '~bulma/sass/utilities/_all'; -@import '../styles/_variables.scss'; +@import '../../styles/_variables.scss'; .button-atom { display: inline-flex; diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Button/Button.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/Button/Button.stories.mdx new file mode 100644 index 000000000..b3588bdda --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Button/Button.stories.mdx @@ -0,0 +1,5 @@ + + +# Button + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Button.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Button/Button.stories.tsx similarity index 84% rename from libs/shared-atomic-design-components/src/lib/atoms/Button.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/Button/Button.stories.tsx index 2fdbcfb63..e88daecf8 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Button.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Button/Button.stories.tsx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' +import { storybookTemplate } from '../../helpers/StorybookTemplate' import ButtonComponent from './Button' diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Button.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Button/Button.tsx similarity index 98% rename from libs/shared-atomic-design-components/src/lib/atoms/Button.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/Button/Button.tsx index 7ed23a5a4..5fae27ad6 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Button.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Button/Button.tsx @@ -1,7 +1,7 @@ import React from 'react' import classnames from 'classnames' import { NavLink } from 'react-router-dom' -import Icon from './Icon' +import { Icon } from '../Icon' import './Button.scss' export interface ButtonProps { diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Button/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/Button/index.ts new file mode 100644 index 000000000..6d255761f --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Button/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './Button'; + +/** ## Button + * + * ... + */ +export const Button = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Caption.scss b/libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.scss similarity index 64% rename from libs/shared-atomic-design-components/src/lib/atoms/Caption.scss rename to libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.scss index 6f71fd896..0cca0a788 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Caption.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.scss @@ -1,5 +1,5 @@ @import '~bulma/sass/utilities/_all'; -@import '../styles/_variables.scss'; +@import '../../styles/_variables.scss'; .caption { line-height: 1.5; diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.stories.mdx new file mode 100644 index 000000000..73cf94bc2 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.stories.mdx @@ -0,0 +1,5 @@ + + +# Caption + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Caption.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.stories.tsx similarity index 75% rename from libs/shared-atomic-design-components/src/lib/atoms/Caption.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.stories.tsx index 34cc7e246..9fc23d90e 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Caption.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' +import { storybookTemplate } from '../../helpers/StorybookTemplate' import CaptionComponent from './Caption' import 'bulma/css/bulma.min.css' @@ -11,6 +11,6 @@ export default { const template = storybookTemplate(CaptionComponent) -export const Caption = template({ +export const Default = template({ children: 'Hello from Talent Pool', }) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Caption.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.tsx similarity index 100% rename from libs/shared-atomic-design-components/src/lib/atoms/Caption.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/Caption/Caption.tsx diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Caption/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/Caption/index.ts new file mode 100644 index 000000000..655e4ae65 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Caption/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './Caption'; + +/** ## Caption + * + * ... + */ +export const Caption = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/CardTags.scss b/libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.scss similarity index 100% rename from libs/shared-atomic-design-components/src/lib/atoms/CardTags.scss rename to libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.scss diff --git a/libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.stories.mdx new file mode 100644 index 000000000..ae19a3afc --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.stories.mdx @@ -0,0 +1,5 @@ + + +# CardTags + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/CardTags.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.stories.tsx similarity index 70% rename from libs/shared-atomic-design-components/src/lib/atoms/CardTags.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.stories.tsx index 1c91e384a..973e7dd42 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/CardTags.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.stories.tsx @@ -1,17 +1,17 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' +import { storybookTemplate } from '../../helpers/StorybookTemplate' import CardTagsComponent from './CardTags' import 'bulma/css/bulma.min.css' export default { - title: 'Atoms/Cardtag', + title: 'Atoms/CardTags', component: CardTagsComponent, } as Meta const template = storybookTemplate(CardTagsComponent) -export const Cardtag = template({ +export const CardTags = template({ items: ['HTML', 'CSS', 'JS', 'JAVA', 'Python'], shortList: false, }) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/CardTags.tsx b/libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.tsx similarity index 100% rename from libs/shared-atomic-design-components/src/lib/atoms/CardTags.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/CardTags/CardTags.tsx diff --git a/libs/shared-atomic-design-components/src/lib/atoms/CardTags/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/CardTags/index.ts new file mode 100644 index 000000000..7cefc48cc --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/CardTags/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './CardTags'; + +/** ## CardTags + * + * ... + */ +export const CardTags = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.scss b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.scss similarity index 100% rename from libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.scss rename to libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.scss diff --git a/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.stories.mdx new file mode 100644 index 000000000..e0ebd649b --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.stories.mdx @@ -0,0 +1,5 @@ + + +# DecoratedHeadline + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.stories.tsx similarity index 68% rename from libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.stories.tsx index 8006022e5..1e6ccbb56 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.stories.tsx @@ -1,17 +1,17 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' +import { storybookTemplate } from '../../helpers/StorybookTemplate' import DecoratedHeadlineComponent from './DecoratedHeadline' import 'bulma/css/bulma.min.css' export default { - title: 'Atoms/Decoratedheadline', + title: 'Atoms/DecoratedHeadline', component: DecoratedHeadlineComponent, } as Meta const template = storybookTemplate(DecoratedHeadlineComponent) -export const Decoratedheadline = template({ +export const DecoratedHeadline = template({ headline: 'Headline', title: 'Title', }) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.tsx b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.tsx similarity index 90% rename from libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.tsx index 53f3a1858..ca088402e 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/DecoratedHeadline.tsx @@ -1,6 +1,5 @@ -import React from 'react' import { Element } from 'react-bulma-components' -import Heading from '../atoms/Heading' +import { Heading } from '../Heading' import './DecoratedHeadline.scss' interface Props { diff --git a/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/index.ts new file mode 100644 index 000000000..967de69d7 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/DecoratedHeadline/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './DecoratedHeadline'; + +/** ## DecoratedHeadline + * + * ... + */ +export const DecoratedHeadline = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.scss b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.scss similarity index 88% rename from libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.scss rename to libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.scss index 27f3b5051..2eecb3e08 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.scss @@ -1,5 +1,5 @@ -@use '../styles/colors' as colors; -@import '../styles/_variables.scss'; +@use '../../styles/colors' as colors; +@import '../../styles/_variables.scss'; @import 'node_modules/react-datepicker/src/stylesheets/datepicker.scss'; .datepicker-trigger { diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.stories.mdx new file mode 100644 index 000000000..71b360acf --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.stories.mdx @@ -0,0 +1,5 @@ + + +# FormDatePicker + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.stories.tsx similarity index 85% rename from libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.stories.tsx index 6e45fdd65..911f8ddde 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' +import { storybookTemplate } from '../../helpers/StorybookTemplate' import { addYears, subYears } from 'date-fns' import FormDatePickerComponent from './FormDatePicker' @@ -7,7 +7,7 @@ import 'bulma/css/bulma.min.css' import 'react-datepicker/dist/react-datepicker.css' export default { - title: 'Atoms/Formdatepicker', + title: 'Atoms/FormDatePicker', component: FormDatePickerComponent, } as Meta @@ -15,7 +15,7 @@ const template = storybookTemplate(FormDatePickerComponent) let datePickerValue = new Date() -export const Formdatepicker = template({ +export const FormDatePicker = template({ label: 'Date of birth', name: 'birthDate', placeholder: 'Add your date of birth', diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.tsx similarity index 95% rename from libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.tsx index 59ad9d3ad..aba0eec21 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/FormDatePicker.tsx @@ -1,11 +1,9 @@ -import React from 'react' import { Form } from 'react-bulma-components' import DatePicker from 'react-datepicker' -import { Icon } from '../atoms' +import { Icon } from '../Icon' import 'react-datepicker/dist/react-datepicker.css' import './FormDatePicker.scss' -import { get } from 'lodash' interface PickerTriggerProps { value?: string diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/index.ts new file mode 100644 index 000000000..2b8579cad --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDatePicker/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './FormDatePicker'; + +/** ## FormDatePicker + * + * ... + */ +export const FormDatePicker = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.scss b/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion/FormDraggableAccordion.scss similarity index 88% rename from libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.scss rename to libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion/FormDraggableAccordion.scss index aa5274b29..105a2a7f3 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion/FormDraggableAccordion.scss @@ -1,5 +1,5 @@ -@use '../styles/colors' as colors; -@import '../styles/_variables.scss'; +@use '../../styles/colors' as colors; +@import '../../styles/_variables.scss'; .form-draggable-accordion { padding-top: 1rem; diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion/FormDraggableAccordion.tsx similarity index 93% rename from libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion/FormDraggableAccordion.tsx index f68a00908..22b064a9a 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion/FormDraggableAccordion.tsx @@ -1,11 +1,11 @@ import classnames from 'clsx' import React, { useEffect, useState } from 'react' import { Columns, Element } from 'react-bulma-components' -import { Icon } from '../atoms' +import { Icon } from '../Icon' import './FormDraggableAccordion.scss' import { Subject } from 'rxjs' -import { ReactComponent as AccordionHandleIcon } from '../../assets/images/accordion-handle.svg' +import { ReactComponent as AccordionHandleIcon } from '../../../assets/images/accordion-handle.svg' interface Props { title: string diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion/index.ts new file mode 100644 index 000000000..9297ab790 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './FormDraggableAccordion'; + +/** ## FormDraggableAccordion + * + * ... + */ +export const FormDraggableAccordion = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormInput/FormInput.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/FormInput/FormInput.stories.mdx new file mode 100644 index 000000000..6a9aab77a --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormInput/FormInput.stories.mdx @@ -0,0 +1,5 @@ + + +# FormInput + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormInput.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormInput/FormInput.stories.tsx similarity index 79% rename from libs/shared-atomic-design-components/src/lib/atoms/FormInput.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/FormInput/FormInput.stories.tsx index fc3b3bba2..54228ab99 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormInput.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormInput/FormInput.stories.tsx @@ -1,6 +1,5 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' -import { educationLevels } from '@talent-connect/shared-config' +import { storybookTemplate } from '../../helpers/StorybookTemplate' import FormInputComponent from './FormInput' import 'bulma/css/bulma.min.css' @@ -12,13 +11,13 @@ enum inputType { } export default { - title: 'Atoms/Forminput', + title: 'Atoms/FormInput', component: FormInputComponent, } as Meta const template = storybookTemplate(FormInputComponent) -export const Forminput = template({ +export const FormInput = template({ name: 'email', className: '', label: 'Enter Email', diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormInput.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormInput/FormInput.tsx similarity index 98% rename from libs/shared-atomic-design-components/src/lib/atoms/FormInput.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/FormInput/FormInput.tsx index 7b7d8d089..2be05d20e 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormInput.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormInput/FormInput.tsx @@ -1,4 +1,3 @@ -import React from 'react' import classnames from 'classnames' import { Form } from 'react-bulma-components' import { get } from 'lodash' diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormInput/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/FormInput/index.ts new file mode 100644 index 000000000..2ea5285cc --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormInput/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './FormInput'; + +/** ## FormInput + * + * ... + */ +export const FormInput = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect/FormSelect.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect/FormSelect.stories.mdx new file mode 100644 index 000000000..4de6ddf5c --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect/FormSelect.stories.mdx @@ -0,0 +1,5 @@ + + +# FormSelect + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect/FormSelect.stories.tsx similarity index 73% rename from libs/shared-atomic-design-components/src/lib/atoms/FormSelect.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/FormSelect/FormSelect.stories.tsx index 40d288aad..cbd9f0a66 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect/FormSelect.stories.tsx @@ -1,23 +1,23 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' -import { educationLevels } from '@talent-connect/shared-config' +import { storybookTemplate } from '../../helpers/StorybookTemplate' +import { EDUCATION_LEVELS } from '@talent-connect/shared-config' import FormSelectComponent from './FormSelect' import 'bulma/css/bulma.min.css' export default { - title: 'Atoms/Formselect', + title: 'Atoms/FormSelect', component: FormSelectComponent, } as Meta const template = storybookTemplate(FormSelectComponent) -export const Formselect = template({ +export const FormSelect = template({ name: 'language', className: '', label: 'Select School', placeholder: 'Select School', - items: educationLevels, + items: EDUCATION_LEVELS, values: { language: '', }, diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect/FormSelect.tsx similarity index 98% rename from libs/shared-atomic-design-components/src/lib/atoms/FormSelect.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/FormSelect/FormSelect.tsx index 330d8f6ee..63b9fee9a 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect/FormSelect.tsx @@ -1,7 +1,6 @@ -import React from 'react' import Select, { components } from 'react-select' import { Form } from 'react-bulma-components' -import { Icon } from '../atoms' +import { Icon } from '../Icon' import { get } from 'lodash' const DropdownIndicator = (props: any) => ( diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect/index.ts new file mode 100644 index 000000000..32e46221e --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './FormSelect'; + +/** ## FormSelect + * + * ... + */ +export const FormSelect = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.scss b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.scss similarity index 71% rename from libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.scss rename to libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.scss index 0390838b8..80fd83982 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.scss @@ -1,5 +1,5 @@ @import '~bulma/sass/utilities/_all'; -@import '../styles/_variables.scss'; +@import '../../styles/_variables.scss'; .redi-textarea { &-characters { diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.stories.mdx new file mode 100644 index 000000000..d39b4c6e0 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.stories.mdx @@ -0,0 +1,5 @@ + + +# FormTextArea + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.stories.tsx similarity index 85% rename from libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.stories.tsx index 8ebe03303..99d4ac540 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.stories.tsx @@ -1,11 +1,11 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' +import { storybookTemplate } from '../../helpers/StorybookTemplate' import FormTextAreaComponent from './FormTextArea' import 'bulma/css/bulma.min.css' export default { - title: 'Atoms/Formtextarea', + title: 'Atoms/FormTextArea', component: FormTextAreaComponent, } as Meta diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.tsx similarity index 99% rename from libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.tsx index e600ae226..3bcf0a1eb 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/FormTextArea.tsx @@ -1,4 +1,3 @@ -import React from 'react' import classnames from 'classnames' import { Form, Content, Columns } from 'react-bulma-components' import './FormTextArea.scss' diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/index.ts new file mode 100644 index 000000000..b28a92644 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/FormTextArea/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './FormTextArea'; + +/** ## FormTextArea + * + * ... + */ +export const FormTextArea = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Heading.scss b/libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.scss similarity index 91% rename from libs/shared-atomic-design-components/src/lib/atoms/Heading.scss rename to libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.scss index 59b6d74eb..127adb49f 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Heading.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.scss @@ -1,6 +1,6 @@ -@use '../styles/colors' as colors; +@use '../../styles/colors' as colors; @import '~bulma/sass/utilities/_all'; -@import '../styles/_variables.scss'; +@import '../../styles/_variables.scss'; .title { // is a class used in bulma, the border modifier diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.stories.mdx new file mode 100644 index 000000000..6d05f876d --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.stories.mdx @@ -0,0 +1,5 @@ + + +# Heading + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Heading.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.stories.tsx similarity index 85% rename from libs/shared-atomic-design-components/src/lib/atoms/Heading.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.stories.tsx index 3190b8129..5e871aa41 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Heading.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' +import { storybookTemplate } from '../../helpers/StorybookTemplate' import HeadingComponent from './Heading' import 'bulma/css/bulma.min.css' diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Heading.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.tsx similarity index 100% rename from libs/shared-atomic-design-components/src/lib/atoms/Heading.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/Heading/Heading.tsx diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Heading/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/Heading/index.ts new file mode 100644 index 000000000..1a140319e --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Heading/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './Heading'; + +/** ## Heading + * + * ... + */ +export const Heading = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Icon.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Icon.tsx deleted file mode 100644 index 1dcf03863..000000000 --- a/libs/shared-atomic-design-components/src/lib/atoms/Icon.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react' -import classnames from 'classnames' -import { ReactComponent as ArrowLeft } from '../../assets/images/arrow-left.svg' -import { ReactComponent as ArrowRight } from '../../assets/images/arrow-right.svg' -import { ReactComponent as Hamburger } from '../../assets/images/hamburger.svg' -import { ReactComponent as Account } from '../../assets/images/account.svg' -import { ReactComponent as Checkmark } from '../../assets/images/checkmark.svg' -import { ReactComponent as Edit } from '../../assets/images/edit.svg' -import { ReactComponent as Cancel } from '../../assets/images/cancel.svg' -import { ReactComponent as Chevron } from '../../assets/images/chevron.svg' -import { ReactComponent as Mail } from '../../assets/images/mail.svg' -import { ReactComponent as Heart } from '../../assets/images/heart.svg' -import { ReactComponent as HeartFilled } from '../../assets/images/heart-filled.svg' -import { ReactComponent as Clipboard } from '../../assets/images/clipboard.svg' -import { ReactComponent as Calendar } from '../../assets/images/calendar.svg' -import { ReactComponent as Certificate } from '../../assets/images/certificate.svg' -import { ReactComponent as Search } from '../../assets/images/search.svg' -import { ReactComponent as Career } from '../../assets/images/career.svg' -import { ReactComponent as Arrow } from '../../assets/images/arrow-step.svg' -import { ReactComponent as Chat } from '../../assets/images/chat.svg' -import { ReactComponent as Handshake } from '../../assets/images/handshake.svg' -import { ReactComponent as Plus } from '../../assets/images/plus.svg' -import { ReactComponent as TpPlus } from '../../assets/images/tp-plus.svg' -import { ReactComponent as Linkedin } from '../../assets/images/linkedin.svg' -import { ReactComponent as Twitter } from '../../assets/images/twitter.svg' -import { ReactComponent as Instagram } from '../../assets/images/instagram.svg' -import { ReactComponent as Meetup } from '../../assets/images/meetup.svg' -import { ReactComponent as Fb } from '../../assets/images/fb.svg' -import { ReactComponent as Loader } from '../../assets/images/loader.svg' -import { ReactComponent as MapPin } from '../../assets/images/map-pin.svg' - -import './Icon.scss' - -export interface IconProps { - icon: - | 'arrowLeft' - | 'arrowRight' - | 'hamburger' - | 'account' - | 'check' - | 'edit' - | 'cancel' - | 'chevron' - | 'heart' - | 'heartFilled' - | 'mail' - | 'clipboard' - | 'certificate' - | 'search' - | 'arrow' - | 'calendar' - | 'career' - | 'chat' - | 'handshake' - | 'plus' - | 'tpPlus' - | 'twitter' - | 'meetup' - | 'linkedin' - | 'instagram' - | 'fb' - | 'loader' - | 'mapPin' - size?: 'small' | 'medium' | 'large' | 'x-large' - space?: 'left' | 'right' - className?: string - style?: React.CSSProperties - onClick?: () => void -} - -const Icons = { - arrowLeft: ArrowLeft, - arrowRight: ArrowRight, - account: Account, - hamburger: Hamburger, - check: Checkmark, - edit: Edit, - cancel: Cancel, - chevron: Chevron, - heart: Heart, - heartFilled: HeartFilled, - clipboard: Clipboard, - calendar: Calendar, - certificate: Certificate, - search: Search, - career: Career, - arrow: Arrow, - handshake: Handshake, - chat: Chat, - mail: Mail, - plus: Plus, - tpPlus: TpPlus, - instagram: Instagram, - meetup: Meetup, - twitter: Twitter, - fb: Fb, - linkedin: Linkedin, - loader: Loader, - mapPin: MapPin, -} - -const Icon = ({ - icon, - space, - size, - className, - onClick, - style = {}, -}: IconProps) => { - const Icon = icon ? Icons[icon] : undefined - - const iconSize = size || 'medium' - - return Icon ? ( - - ) : null -} - -export default Icon diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Icon.scss b/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.scss similarity index 90% rename from libs/shared-atomic-design-components/src/lib/atoms/Icon.scss rename to libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.scss index db8b8c5aa..da2274668 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Icon.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.scss @@ -1,5 +1,5 @@ @import '~bulma/sass/utilities/_all'; -@import '../styles/_variables.scss'; +@import '../../styles/_variables.scss'; .icon { width: 1em; diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.stories.mdx new file mode 100644 index 000000000..160056c5f --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.stories.mdx @@ -0,0 +1,5 @@ + + +# Icon + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.stories.tsx new file mode 100644 index 000000000..bd395047b --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.stories.tsx @@ -0,0 +1,13 @@ +import { Meta } from '@storybook/react/types-6-0' +import { storybookTemplate } from '../../helpers/StorybookTemplate' + +import { Icon } from '.' + +export default { + title: 'Atoms/Icon', + component: Icon, +} as Meta + +const template = storybookTemplate(Icon) + +export const Default = template({}) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.tsx new file mode 100644 index 000000000..bdd1de419 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Icon/Icon.tsx @@ -0,0 +1,100 @@ +import React from 'react' +import classnames from 'classnames' +import { ReactComponent as ArrowLeft } from '../../../assets/images/arrow-left.svg' +import { ReactComponent as ArrowRight } from '../../../assets/images/arrow-right.svg' +import { ReactComponent as Hamburger } from '../../../assets/images/hamburger.svg' +import { ReactComponent as Account } from '../../../assets/images/account.svg' +import { ReactComponent as Checkmark } from '../../../assets/images/checkmark.svg' +import { ReactComponent as Edit } from '../../../assets/images/edit.svg' +import { ReactComponent as Cancel } from '../../../assets/images/cancel.svg' +import { ReactComponent as Chevron } from '../../../assets/images/chevron.svg' +import { ReactComponent as Mail } from '../../../assets/images/mail.svg' +import { ReactComponent as Heart } from '../../../assets/images/heart.svg' +import { ReactComponent as HeartFilled } from '../../../assets/images/heart-filled.svg' +import { ReactComponent as Clipboard } from '../../../assets/images/clipboard.svg' +import { ReactComponent as Calendar } from '../../../assets/images/calendar.svg' +import { ReactComponent as Certificate } from '../../../assets/images/certificate.svg' +import { ReactComponent as Search } from '../../../assets/images/search.svg' +import { ReactComponent as Career } from '../../../assets/images/career.svg' +import { ReactComponent as Arrow } from '../../../assets/images/arrow-step.svg' +import { ReactComponent as Chat } from '../../../assets/images/chat.svg' +import { ReactComponent as Handshake } from '../../../assets/images/handshake.svg' +import { ReactComponent as Plus } from '../../../assets/images/plus.svg' +import { ReactComponent as TpPlus } from '../../../assets/images/tp-plus.svg' +import { ReactComponent as Linkedin } from '../../../assets/images/linkedin.svg' +import { ReactComponent as Twitter } from '../../../assets/images/twitter.svg' +import { ReactComponent as Instagram } from '../../../assets/images/instagram.svg' +import { ReactComponent as Meetup } from '../../../assets/images/meetup.svg' +import { ReactComponent as Fb } from '../../../assets/images/fb.svg' +import { ReactComponent as Loader } from '../../../assets/images/loader.svg' +import { ReactComponent as MapPin } from '../../../assets/images/map-pin.svg' + +import './Icon.scss' + +const Icons = { + arrowLeft: ArrowLeft, + arrowRight: ArrowRight, + account: Account, + hamburger: Hamburger, + check: Checkmark, + edit: Edit, + cancel: Cancel, + chevron: Chevron, + heart: Heart, + heartFilled: HeartFilled, + clipboard: Clipboard, + calendar: Calendar, + certificate: Certificate, + search: Search, + career: Career, + arrow: Arrow, + handshake: Handshake, + chat: Chat, + mail: Mail, + plus: Plus, + tpPlus: TpPlus, + instagram: Instagram, + meetup: Meetup, + twitter: Twitter, + fb: Fb, + linkedin: Linkedin, + loader: Loader, + mapPin: MapPin, +} + +export interface IconProps { + icon: keyof typeof Icons + size?: 'small' | 'medium' | 'large' | 'x-large' + space?: 'left' | 'right' + className?: string + style?: React.CSSProperties + onClick?: () => void +} + +const Icon = ({ + icon, + space, + size, + className, + onClick, + style = {}, +}: IconProps) => { + const Icon = icon ? Icons[icon] : undefined + + const iconSize = size || 'medium' + + return Icon ? ( + + ) : null +} + +export default Icon diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Icon/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/Icon/index.ts new file mode 100644 index 000000000..2ba8b6bc4 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Icon/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './Icon'; + +/** ## Icon + * + * ... + */ +export const Icon = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Loader.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Loader.stories.tsx deleted file mode 100644 index d8573ba2a..000000000 --- a/libs/shared-atomic-design-components/src/lib/atoms/Loader.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' - -import LoaderComponent from './Loader' - -export default { - title: 'Atoms/Loader', - component: LoaderComponent, -} as Meta - -const template = storybookTemplate(LoaderComponent) - -export const Loader = template({ - loading: true, -}) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Loader.scss b/libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.scss similarity index 91% rename from libs/shared-atomic-design-components/src/lib/atoms/Loader.scss rename to libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.scss index 970aaf175..3db234245 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Loader.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.scss @@ -1,5 +1,5 @@ @import '~bulma/sass/utilities/_all'; -@import '../styles/_variables.scss'; +@import '../../styles/_variables.scss'; .loader { position: absolute; diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.stories.mdx new file mode 100644 index 000000000..67011e779 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.stories.mdx @@ -0,0 +1,5 @@ + + +# Loader + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.stories.tsx new file mode 100644 index 000000000..a8e8e4d12 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.stories.tsx @@ -0,0 +1,15 @@ +import { Meta } from '@storybook/react/types-6-0' +import { storybookTemplate } from '../../helpers/StorybookTemplate' + +import { Loader } from '.' + +export default { + title: 'Atoms/Loader', + component: Loader, +} as Meta + +const template = storybookTemplate(Loader) + +export const Default = template({ + loading: true, +}) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Loader.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.tsx similarity index 87% rename from libs/shared-atomic-design-components/src/lib/atoms/Loader.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.tsx index a912d3146..bf9627565 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Loader.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Loader/Loader.tsx @@ -1,7 +1,6 @@ -import React from 'react' import './Loader.scss' import classnames from 'classnames' -import Icon from './Icon' +import { Icon } from '../Icon' interface LoaderProps { loading?: boolean diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Loader/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/Loader/index.ts new file mode 100644 index 000000000..0f9a4e893 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Loader/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './Loader'; + +/** ## Loader + * + * ... + */ +export const Loader = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Placeholder/Placeholder.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/Placeholder/Placeholder.stories.mdx new file mode 100644 index 000000000..4dde2e77b --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Placeholder/Placeholder.stories.mdx @@ -0,0 +1,5 @@ + + +# Placeholder + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Placeholder.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Placeholder/Placeholder.stories.tsx similarity index 83% rename from libs/shared-atomic-design-components/src/lib/atoms/Placeholder.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/Placeholder/Placeholder.stories.tsx index f13380bb4..80cbd3061 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/Placeholder.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/Placeholder/Placeholder.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' +import { storybookTemplate } from '../../helpers/StorybookTemplate' import PlaceholderComponent from './Placeholder' import 'bulma/css/bulma.min.css' diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Placeholder.tsx b/libs/shared-atomic-design-components/src/lib/atoms/Placeholder/Placeholder.tsx similarity index 100% rename from libs/shared-atomic-design-components/src/lib/atoms/Placeholder.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/Placeholder/Placeholder.tsx diff --git a/libs/shared-atomic-design-components/src/lib/atoms/Placeholder/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/Placeholder/index.ts new file mode 100644 index 000000000..0da686f43 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/Placeholder/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './Placeholder'; + +/** ## Placeholder + * + * ... + */ +export const Placeholder = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SVGImage.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage.stories.tsx deleted file mode 100644 index 57b6ee56c..000000000 --- a/libs/shared-atomic-design-components/src/lib/atoms/SVGImage.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' - -import SVGImageComponent, { SVGImages } from './SVGImage' - -export default { - title: 'Atoms/image', - component: SVGImageComponent, -} as Meta - -const template = storybookTemplate(SVGImageComponent) - -export const SVG = template({ - image: 'mentee', - className: 'svg-image', -}) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SVGImage.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage.tsx deleted file mode 100644 index cee955e3c..000000000 --- a/libs/shared-atomic-design-components/src/lib/atoms/SVGImage.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react' -import { ReactComponent as HeroMentee } from '../../assets/images/hero-mentee.svg' -import { ReactComponent as HeroMentor } from '../../assets/images/hero-mentor.svg' -import { ReactComponent as Hero } from '../../assets/images/hero.svg' -import { ReactComponent as Hello } from '../../assets/images/hello.svg' -import { ReactComponent as HelloMobile } from '../../assets/images/hello-mobile.svg' -import { ReactComponent as Mentee } from '../../assets/images/mentee.svg' -import { ReactComponent as Mentor } from '../../assets/images/mentor.svg' - -export type SVGTypes = 'heroMentee' | 'heroMentor' - -export type SVGImages = - | 'mentee' - | 'mentor' - | 'jobseeker' - | 'company' - | 'hero' - | 'hello' - | 'helloMobile' - -interface Props { - image: SVGImages | SVGTypes - className?: string -} - -const Images = { - heroMentee: HeroMentee, - heroMentor: HeroMentor, - mentee: Mentee, - mentor: Mentor, - jobseeker: Mentee, - company: Mentor, - hero: Hero, - hello: Hello, - helloMobile: HelloMobile, -} - -const SVGImage = ({ image, className }: Props) => { - const Image = image ? Images[image] : undefined - - return Image ? : null -} - -export default SVGImage diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.stories.mdx new file mode 100644 index 000000000..3935438fe --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.stories.mdx @@ -0,0 +1,5 @@ + + +# SVGImage + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.stories.tsx new file mode 100644 index 000000000..77fad4be3 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.stories.tsx @@ -0,0 +1,16 @@ +import { Meta } from '@storybook/react/types-6-0' +import { storybookTemplate } from '../../helpers/StorybookTemplate' + +import { SVGImage } from '.' + +export default { + title: 'Atoms/SVGImage', + component: SVGImage, +} as Meta + +const template = storybookTemplate(SVGImage) + +export const Default = template({ + image: 'mentee', + className: 'svg-image', +}) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.tsx new file mode 100644 index 000000000..8dd067b97 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/SVGImage.tsx @@ -0,0 +1,39 @@ +import { ReactComponent as HeroMentee } from '../../../assets/images/hero-mentee.svg' +import { ReactComponent as HeroMentor } from '../../../assets/images/hero-mentor.svg' +import { ReactComponent as Hero } from '../../../assets/images/hero.svg' +import { ReactComponent as Hello } from '../../../assets/images/hello.svg' +import { ReactComponent as HelloMobile } from '../../../assets/images/hello-mobile.svg' +import { ReactComponent as Mentee } from '../../../assets/images/mentee.svg' +import { ReactComponent as Mentor } from '../../../assets/images/mentor.svg' + + +const SVGImages = { + heroMentee: HeroMentee, + heroMentor: HeroMentor, +} + +const Images = { + mentee: Mentee, + mentor: Mentor, + jobseeker: Mentee, + company: Mentor, + hero: Hero, + hello: Hello, + helloMobile: HelloMobile, +} + +export type SVGImages = keyof typeof Images +export type SVGTypes = keyof typeof SVGImages + +interface Props { + image: SVGImages | SVGTypes + className?: string +} + +const SVGImage = ({ image, className }: Props) => { + const Image = image ? (Images[image] || SVGImages[image]) : undefined + + return Image ? : null +} + +export default SVGImage diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/index.ts new file mode 100644 index 000000000..062eb3ad2 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/SVGImage/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './SVGImage'; + +/** ## SVGImage + * + * ... + */ +export const SVGImage = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SearchField.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SearchField.stories.tsx deleted file mode 100644 index 94fde9da2..000000000 --- a/libs/shared-atomic-design-components/src/lib/atoms/SearchField.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' - -import SearchFieldComponent from './SearchField' -import 'bulma/css/bulma.min.css' - -export default { - title: 'Atoms/Searchfield', - component: SearchFieldComponent, -} as Meta - -const template = storybookTemplate(SearchFieldComponent) - -export const Searchfield = template({ - defaultValue: 'Talent Pool', - placeholder: 'Search', - valueChange: (value: string) => { - return - }, -}) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SearchField/SearchField.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/SearchField/SearchField.stories.mdx new file mode 100644 index 000000000..5f76cc935 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/SearchField/SearchField.stories.mdx @@ -0,0 +1,5 @@ + + +# SearchField + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SearchField/SearchField.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SearchField/SearchField.stories.tsx new file mode 100644 index 000000000..6cd149d56 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/SearchField/SearchField.stories.tsx @@ -0,0 +1,20 @@ +import { Meta } from '@storybook/react/types-6-0' +import { storybookTemplate } from '../../helpers/StorybookTemplate' + +import { SearchField } from '.' +import 'bulma/css/bulma.min.css' + +export default { + title: 'Atoms/SearchField', + component: SearchField, +} as Meta + +const template = storybookTemplate(SearchField) + +export const Default = template({ + defaultValue: 'Talent Pool', + placeholder: 'Search', + valueChange: (value: string) => { + return + }, +}) diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SearchField.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SearchField/SearchField.tsx similarity index 100% rename from libs/shared-atomic-design-components/src/lib/atoms/SearchField.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/SearchField/SearchField.tsx diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SearchField/index.ts b/libs/shared-atomic-design-components/src/lib/atoms/SearchField/index.ts new file mode 100644 index 000000000..8ceac4762 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/SearchField/index.ts @@ -0,0 +1,7 @@ +import { default as Component } from './SearchField'; + +/** ## SearchField + * + * ... + */ +export const SearchField = Component; \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/MediaIcons.scss b/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.scss similarity index 90% rename from libs/shared-atomic-design-components/src/lib/atoms/MediaIcons.scss rename to libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.scss index 491bb8ae7..a958ea746 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/MediaIcons.scss +++ b/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.scss @@ -1,5 +1,5 @@ @import '~bulma/sass/utilities/_all'; -@import '../styles/_variables.scss'; +@import '../../styles/_variables.scss'; .media-icons { &__list { diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.stories.mdx b/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.stories.mdx new file mode 100644 index 000000000..e95fa11f6 --- /dev/null +++ b/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.stories.mdx @@ -0,0 +1,5 @@ + + +# SocialMediaIcons + +... \ No newline at end of file diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons.stories.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.stories.tsx similarity index 82% rename from libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons.stories.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.stories.tsx index 74fb59649..46ae655c1 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons.stories.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from '@storybook/react/types-6-0' -import { storybookTemplate } from '../helpers/StorybookTemplate' +import { storybookTemplate } from '../../helpers/StorybookTemplate' import SocialMediaIconsComponent from './SocialMediaIcons' diff --git a/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons.tsx b/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.tsx similarity index 86% rename from libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons.tsx rename to libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.tsx index 65cbbef82..2191d9595 100644 --- a/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons.tsx +++ b/libs/shared-atomic-design-components/src/lib/atoms/SocialMediaIcons/SocialMediaIcons.tsx @@ -1,8 +1,13 @@ -import React from 'react' -import Icon, { IconProps } from '../atoms/Icon' -// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries -import { envRediLocation } from '../../../../../apps/redi-connect/src/utils/env-redi-location' -import './MediaIcons.scss' +import Icon, { IconProps } from '../Icon/Icon' +import { envRediLocation } from '../../../../../../apps/redi-connect/src/utils/env-redi-location' +import './SocialMediaIcons.scss' + +interface SocialMediaIcon { + icon: IconProps['icon'] + berlin: string + munich: string + nrw: string +} const icons: Array = [ { @@ -39,12 +44,6 @@ const icons: Array = [ }, ] -interface SocialMediaIcon { - icon: IconProps['icon'] - berlin: string - munich: string - nrw: string -} const SocialMediaIcons = () => (