docs: adds an Odyssey theme for Storybook #1183

edburyenegren-okta · 2021-11-15T18:36:32Z

Customizes our SB UI via the theming interface with values from @josesolano-okta.

ghost · 2021-11-15T18:52:35Z

packages/odyssey-storybook/.storybook/OdysseyTheme.js

+
+  brandTitle: "Odyssey Design System",
+  //brandUrl: 'https://odyssey.okta.com',
+  //brandImage: 'https://place-hold.it/350x150',


curious - could you build this using entirely using values exported from @okta/odyssey-design-tokens at this point? What would we be missing?

Yup! Everything here uses existing tokens straight from the palette, so we could use those here if SB were set up to ingest them.

@edburyenegren-okta that is great - but I see the theme values hardcoded here, I was expecting to see something like this:

import { colors, font, ... } from "@okta/odyssey-design-tokens"

where we compose the values here

Im going to take on this chunk of work, lets not let it hold up the merge. I will handle in a FF.

@arnoldsandoval-okta and I fixed up the tokens package to get it working locally (previously, the build was failing). However, I'm now getting this error in CI:

ERR! Module not found: Error: Can't resolve '@okta/odyssey-design-tokens' in '/home/runner/work/odyssey/odyssey/packages/odyssey-storybook/.storybook'

Looks like our tokens package isn't prepped for consumption correctly?

~~Adding the package via yarn add fails, which is why yarn.lock hasn't been updated yet either.~~

Local packages must have a version specified for install or yarn will ping the remote registry before looking locally.

Setting this down for the night, but confirming that yarn build-storybook also fails locally while relying on @okta/odyssey-design-tokens. Local development is still 💯.

packages/odyssey-storybook/.storybook/manager.js

arnoldsandoval-okta · 2021-11-15T22:16:46Z

packages/odyssey-storybook/.storybook/preview-head.html

+  .sbdocs .sbdocs-a {
+    color: #1662dd;
+  }


😢 theming doesnt allow us to override this?

Nope 😞

SB-Docs doesn't have a theme interface, so this is their preferred method for targeting the addon styles for now.

arnoldsandoval-okta · 2021-11-15T22:16:50Z

packages/odyssey-storybook/.storybook/preview.js

+      order: [
+        "Welcome",
+        "Contributing",
+        "Guidelines",
+        "Components",
+        "Utilities",
+      ],


arnoldsandoval-okta

We can tackle tokens in a fast follow. Lets coordinate next steps over DM.

Co-authored-by: Arnold Sandoval <62259644+arnoldsandoval-okta@users.noreply.github.com>

* build(odyssey-design-tokens): add prepare script * build(odyssey-design-tokens): add stylelint config to ignore dist

* docs(odyssey-storybook): adds an Odyssey theme for Storybook * docs(odyssey-storybook): updates contribution guidelines * fix(odyssey-design-tokens): call "value" instead of whole objects * build(odyssey-design-tokens): add prepare script * build(odyssey-design-tokens): add stylelint config to ignore dist Co-authored-by: Arnold Sandoval <62259644+arnoldsandoval-okta@users.noreply.github.com> Co-authored-by: Jeff Belser <63716167+jeffbelser-okta@users.noreply.github.com>

* chore(odyssey-react): add text component to tag (#1169) * chore(odyssey-react): add text component to infobox (#1171) * feat(odyssey-react): Text component refactor in Banner (#1160) * feat(odyssey-react): refactor Banner to use Text component. Add default font family to Heading * chore(odyssey-react): add semantic tag back in for banner * chore(odyssey-storybook): remove deprecated global styles from storybook * Revert "chore(odyssey-storybook): remove deprecated global styles from storybook" This reverts commit 247e5f0. * Add documentation template (#1166) * docs: added documentation template for contributors * chore(odyssey-react): fix Form type annotation and improve Toast.Provider story (#1175) * chore(odyssey-react): fix type annotations for form * chore(odyssey-react): use odyssey form component in Toast.Provider story * chore(odyssey-react): use relative path for form import in toast story * chore(odyssey-react): add text component to tooltip (#1170) * chore(odyssey-react): add text component to tooltip * chore(odyssey-react): remove text css for tooltip * build: use conventional commits for changelog and lint * test(odyssey-react): add coverage for controlled Select * refactor(odyssey-react): use Text for List * feat: support async select options * feat: expose hidden choices reference * fix: lint * fix: remove added dep / prop * fix: updates per review feedback * fix: type issue need cast to force union start type when using callback * fix: controlled select case by using to ref.current * docs: adds an Odyssey theme for Storybook (#1183) * docs(odyssey-storybook): adds an Odyssey theme for Storybook * docs(odyssey-storybook): updates contribution guidelines * fix(odyssey-design-tokens): call "value" instead of whole objects * build(odyssey-design-tokens): add prepare script * build(odyssey-design-tokens): add stylelint config to ignore dist Co-authored-by: Arnold Sandoval <62259644+arnoldsandoval-okta@users.noreply.github.com> Co-authored-by: Jeff Belser <63716167+jeffbelser-okta@users.noreply.github.com> * refactor(odyssey-react): move related types into useChoices module * docs: adds an Odyssey theme for Storybook (#1183) * docs(odyssey-storybook): adds an Odyssey theme for Storybook * docs(odyssey-storybook): updates contribution guidelines * fix(odyssey-design-tokens): call "value" instead of whole objects * build(odyssey-design-tokens): add prepare script * build(odyssey-design-tokens): add stylelint config to ignore dist Co-authored-by: Arnold Sandoval <62259644+arnoldsandoval-okta@users.noreply.github.com> Co-authored-by: Jeff Belser <63716167+jeffbelser-okta@users.noreply.github.com> * build: bump versions for v0.8.4 * docs: update CHANGELOG for v0.8.4 Co-authored-by: Edbury Enegren <edbury.enegren@okta.com> Co-authored-by: Jeff Belser <63716167+jeffbelser-okta@users.noreply.github.com> Co-authored-by: MACY ABBEY <macy.abbey@okta.com>

* chore(odyssey-react): add text component to tag (#1169) * chore(odyssey-react): add text component to infobox (#1171) * feat(odyssey-react): Text component refactor in Banner (#1160) * feat(odyssey-react): refactor Banner to use Text component. Add default font family to Heading * chore(odyssey-react): add semantic tag back in for banner * chore(odyssey-storybook): remove deprecated global styles from storybook * Revert "chore(odyssey-storybook): remove deprecated global styles from storybook" This reverts commit 247e5f0. * Add documentation template (#1166) * docs: added documentation template for contributors * chore(odyssey-react): fix Form type annotation and improve Toast.Provider story (#1175) * chore(odyssey-react): fix type annotations for form * chore(odyssey-react): use odyssey form component in Toast.Provider story * chore(odyssey-react): use relative path for form import in toast story * chore(odyssey-react): add text component to tooltip (#1170) * chore(odyssey-react): add text component to tooltip * chore(odyssey-react): remove text css for tooltip * build: use conventional commits for changelog and lint * test(odyssey-react): add coverage for controlled Select * refactor(odyssey-react): use Text for List * feat: support async select options * feat: expose hidden choices reference * fix: lint * fix: remove added dep / prop * fix: updates per review feedback * fix: type issue need cast to force union start type when using callback * fix: controlled select case by using to ref.current * docs: adds an Odyssey theme for Storybook (#1183) * docs(odyssey-storybook): adds an Odyssey theme for Storybook * docs(odyssey-storybook): updates contribution guidelines * fix(odyssey-design-tokens): call "value" instead of whole objects * build(odyssey-design-tokens): add prepare script * build(odyssey-design-tokens): add stylelint config to ignore dist Co-authored-by: Arnold Sandoval <62259644+arnoldsandoval-okta@users.noreply.github.com> Co-authored-by: Jeff Belser <63716167+jeffbelser-okta@users.noreply.github.com> * refactor(odyssey-react): move related types into useChoices module * docs: adds an Odyssey theme for Storybook (#1183) * docs(odyssey-storybook): adds an Odyssey theme for Storybook * docs(odyssey-storybook): updates contribution guidelines * fix(odyssey-design-tokens): call "value" instead of whole objects * build(odyssey-design-tokens): add prepare script * build(odyssey-design-tokens): add stylelint config to ignore dist Co-authored-by: Arnold Sandoval <62259644+arnoldsandoval-okta@users.noreply.github.com> Co-authored-by: Jeff Belser <63716167+jeffbelser-okta@users.noreply.github.com> * build: bump versions for v0.8.4 * docs: update CHANGELOG for v0.8.4 Co-authored-by: Edbury Enegren <edbury.enegren@okta.com> Co-authored-by: Jeff Belser <63716167+jeffbelser-okta@users.noreply.github.com> Co-authored-by: MACY ABBEY <macy.abbey@okta.com> Co-authored-by: Edbury Enegren <edbury.enegren@okta.com> Co-authored-by: Jeff Belser <63716167+jeffbelser-okta@users.noreply.github.com> Co-authored-by: MACY ABBEY <macy.abbey@okta.com>

docs: adds an Odyssey theme for Storybook

48ac554

edburyenegren-okta requested a review from a team as a code owner November 15, 2021 18:36

refactor: prettier -_-

8a88d71

ghost reviewed Nov 15, 2021

View reviewed changes

edburyenegren-okta added 8 commits November 15, 2021 11:08

docs: update SB theme

8e05f62

docs: inline override for correct font-family

6ce4ddd

refactor: prettier.

41d2e3a

docs: ensure color is correct within .sbdocs

a4d0926

docs: update contribution guidelines

753a98c

refactor: prettier.

67753d3

docs: update toolbar colors

2933e6f

docs: update a11y compliance badge

d725b15

arnoldsandoval-okta reviewed Nov 15, 2021

View reviewed changes

packages/odyssey-storybook/.storybook/manager.js Outdated Show resolved Hide resolved

arnoldsandoval-okta reviewed Nov 15, 2021

View reviewed changes

arnoldsandoval-okta approved these changes Nov 15, 2021

View reviewed changes

edburyenegren-okta and others added 6 commits November 15, 2021 14:22

Update packages/odyssey-storybook/.storybook/manager.js

36dfc86

Co-authored-by: Arnold Sandoval <62259644+arnoldsandoval-okta@users.noreply.github.com>

fix(odyssey-design-tokens): call "value" instead of whole objects

2e24031

docs: update theme to use tokens

3e8b09c

fix: reinstall with yarn, specify version

ab04fb0

refactor: sort tokens

bf10f30

Jb ci test (#1186)

efafb4f

* build(odyssey-design-tokens): add prepare script * build(odyssey-design-tokens): add stylelint config to ignore dist

ghost approved these changes Nov 16, 2021

View reviewed changes

edburyenegren-okta merged commit 63a9458 into develop Nov 16, 2021

edburyenegren-okta deleted the ee/theme-storybook branch November 16, 2021 22:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: adds an Odyssey theme for Storybook #1183

docs: adds an Odyssey theme for Storybook #1183

edburyenegren-okta commented Nov 15, 2021

ghost Nov 15, 2021 •

edited by ghost

Loading

edburyenegren-okta Nov 15, 2021

ghost Nov 15, 2021

arnoldsandoval-okta Nov 15, 2021

edburyenegren-okta Nov 15, 2021 •

edited

Loading

edburyenegren-okta Nov 16, 2021 •

edited

Loading

edburyenegren-okta Nov 16, 2021

arnoldsandoval-okta Nov 15, 2021

edburyenegren-okta Nov 15, 2021

arnoldsandoval-okta Nov 15, 2021

arnoldsandoval-okta left a comment

docs: adds an Odyssey theme for Storybook #1183

docs: adds an Odyssey theme for Storybook #1183

Conversation

edburyenegren-okta commented Nov 15, 2021

ghost Nov 15, 2021 • edited by ghost Loading

Choose a reason for hiding this comment

edburyenegren-okta Nov 15, 2021

Choose a reason for hiding this comment

ghost Nov 15, 2021

Choose a reason for hiding this comment

arnoldsandoval-okta Nov 15, 2021

Choose a reason for hiding this comment

edburyenegren-okta Nov 15, 2021 • edited Loading

Choose a reason for hiding this comment

edburyenegren-okta Nov 16, 2021 • edited Loading

Choose a reason for hiding this comment

edburyenegren-okta Nov 16, 2021

Choose a reason for hiding this comment

arnoldsandoval-okta Nov 15, 2021

Choose a reason for hiding this comment

edburyenegren-okta Nov 15, 2021

Choose a reason for hiding this comment

arnoldsandoval-okta Nov 15, 2021

Choose a reason for hiding this comment

arnoldsandoval-okta left a comment

Choose a reason for hiding this comment

ghost Nov 15, 2021 •

edited by ghost

Loading

edburyenegren-okta Nov 15, 2021 •

edited

Loading

edburyenegren-okta Nov 16, 2021 •

edited

Loading