Vocabulary: Add two new text styles

[panchovm]

Description

We need to add two new text styles that are currently available in the Design Library. These are:

1. Heading 6B
2. Small caption

These styles were created for the mobile resolution where some text styles needed new versions in this resolution. The specs can be found in the mockups.

[shobhi1310]

@panchovm Can I work on this issue ?

[panchovm]

Wait for @dhruvkb or any other team member that is managing these tasks to assign you.

[dhruvkb]

Sure @shobhi1310, you can work on this.

[shobhi1310]

I have an issue, I have forked the repo and am setting it up locally, on running the npm run watch command, in the end I am being prompted this error and it exits the process.

How to fix it?
I have already run npm install, so all dependencies should have been installed apart from that I have also run npm run setup

[shobhi1310]

I am new to open-source and I do not want to make mistakes and am learning constantly.
So, I just wanted to confirm. These need to be added right?

[nimishbongale]

I have an issue, I have forked the repo and am setting it up locally, on running the npm run watch command, in the end I am being prompted this error and it exits the process.

@obulat just tagging you here

I think it points to the earlier issue (#801) we had, although I'm not entirely sure.

In the meantime, @shobhi1310, please try setting up only the vocabulary storybook this way:

cd packages/vocabulary
npm install --legacy-peer-deps
npm run build
npm run storybook

[obulat]

This error happens because of our new SVG icons, I will try to find a fix and a workaround later today.

[obulat]

How to fix it?
I have already run npm install, so all dependencies should have been installed apart from that I have also run npm run setup

I see that you have an older version of vocabulary: 2020.11.1, and the current one is 2020.11.3. Could you please update and try again. If you have any more errors, don't hesitate to ask again!

[shobhi1310]

I actually forked the repository and then further ran commands which were provided in setting up locally. For updating which command should I run?

[shobhi1310]

@panchovm
sir, can you once again describe what needs to be done exactly?

I am new to open-source and I do not want to make mistakes and am learning constantly.
So, I just wanted to confirm. These need to be added right?

Do I have to change the vocabulary page in the Typography section as shown here:

[panchovm]

@shobhi1310 we need to add the Heading 6B and small caption styles. If you see the Docs tab, all styles are displayed there.

[tichnas]

@shobhi1310 Are you still working on this issue?

[akshayprabhu200]

Is this issue open to take? This would be my first commit, had a question if so - the way I understand this issue based on @dhruvkb's comment is that someone needs to update the typography.scss file to add the two tags based on specifications from Figma. Is this correct?

[dhruvkb]

@akshayprabhu200 you can take it up. And yes, the goal is to have typography.scss provide the all the font styles needed for the new types of headings and captions.

[akshayprabhu200]

I have added two styles h6 and small-caption to the typography,scss file. Also updated the docs to reflect the changes, do I need to write any tests for these (and if so where) and run any linter before a PR?

[nimishbongale]

do I need to write any tests for these (and if so where) and run any linter before a PR?

The linter we have configured is a husky pre-commit linter. It will run automatically when you start your commit. You can go ahead and raise a relevant PR linking to this issue for now (perhaps even a draft PR). The rest will be taken care of during a code review.