quran / common-components Goto Github PK

Related: quran/quran.com-frontend#513
Demo: http://codepen.io/arshdkhn1/pen/ZBajrE/

Bootstrap button has a prop for href which would style an <a> like a button and apply the href value.

Quran.com showing video and foot note in popup, next maybe we'll use popup for tafsir as well.

We need to allow users to navigate to sister sites. Thinking of something like Google and LinkedIn:

Similar to Quran.com

Scrolling through 114 surah isn't good UX, neither scrolling 286 ayah. How about adding searchable select component. Demo: https://building.coursera.org/ui/?selectedKind=basic.Select&selectedStory=Default%20%28untested%29&full=0&down=0&left=1&panelRight=1&downPanel=tuchk4%2Freadme%2Fpanel

Ideally, we use for all sites!

would it be possible to curl salah.com and get back a nicely formatted salah table similar to how you can curl wttr.in
if there is already a nice way to do this that would be cool too.

To copy things

There should be a component to drop into any of our sites that links to other sister sites. Not sure if it's a dropdown or a list or what. I like the way Google has it

Where can I find the Quran text files

@mmahalwy I started moving the button we use on quranicaudio over. Let me know if you have any specific components you have in mind. What would be cool in the future we we can have an Ayah Component that can render ayah's and call our api to retrieve the data.

I know the lib folder was the compiled code but since we will just import the components directly from other projects, no need, no?

For example

import Button from '@quran/common-components/src/components/Button;

Thoughts?

Maybe something like this:

Hi,

I am running a local build of the quran.com-frontend. While working, I found the following error that
occurs on each body click.

In the Drawer Component, the event handler for clicks on the body tries to call
the contains method on a Styled Component.

I have seen the API reference for Styled Components, and have not come across any contains method.

@mmahalwy

I am trying to make the npm pipe line work, however I am running in to path errors. We will have to keep everything contained. I will see what I can do about scss variables however images and such have to be contained to specific components, so we don't have to worry about paths. Unless you have any ideas.

/Users/sab/workspace/apps/audio.quran.com/node_modules/loader-runner/lib/LoaderRunner.js:109
                        throw e;
                        ^

Error: Module build failed:
@import '../../styles/variables.scss';
^
      File to import not found or unreadable: ../../styles/variables.scss
Parent style sheet: stdin

Our fonts + sizes should be consistent throughout!

Currently quran-components is on my personal npm account, we need to move this over to something official.

Tab title could be a component or any html tag, see following use case:

<Tab title={ 
   <LocaleFormattedMessage
      id="surah.index.heading"
      defaultMessage="SURAHS (CHAPTERS)"
    />
 }>
</Tab>

https://github.com/quran/common-components/blob/master/src/Root.js

I read an interesting article. Since we use font-awesome, we can get the the svg files from https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg and make them into simple React component.

Benefits:

• Less network calls (better than sprites and network calls)
• We have our own set of icons.

thoughts?

https://quran.github.io/common-components/?selectedKind=Drawer&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel

@arshdkhn1 I will assign this for you since you worked on it.

Similar to this:

So that the dropdown also looks more like it:

• Links to other sites
• Allow to add links/dropdowns to left or right side

Renders: